前言

• 不涉及理论知识，请参考 https://cn.vuejs.org/v2/guide/transition... ;

• 不使用第三方库，如 Animate.css, Velocity.js ;

• 贝塞尔曲线（cubic-bezier）， http://yisibl.github.io/cubic-bezier/#.8... 。

正文

• fade（淡入淡出），大概是最常见的：

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .3s; 
  }
  
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
  

• vue-hackernews 翻页：

  .slide-left-enter,
  .slide-right-leave-to {
   opacity: 0;
   transform: translate(-30px, 0);
  }
  
  .slide-left-leave-to,
  .slide-right-enter {
   opacity: 0;
   transform: translate(-30px, 0);
  }
  
  

  

• Element 展开折叠 :

  源码： https://github.com/ElemeFE/element/blob/...

• btn ：

  <template>
    <div>
      <transition-group tag="div" name="btn">
        <button key="1">a</button>
        <button key="2">b</butotn>
      </transition-group>
    </div>
  <template>
  
  <style>
  .btn-enter-active,
  .btn-leave-active {
    transition: all .5s; 
  }
  
  .btn-enter,
  .btn-leave-active {
    opacity: 0;
    transform: translateX(30px); 
  }
  
  .btn-move {
    transition: all .5s; 
  }
  
  .btn-leave-active {
    position: absolute; 
  }
  </style>
  
  

用于面包屑：

• 列表：

  列表方式提供了5种方式 https://github.com/jkchao/vue-blog/blob/...

  

  

最后：

过渡，可以是景上添花，也可以是 shit 。