Vue 經常使用的過渡

前言

• 不涉及理論知識，請參考 https://cn.vuejs.org/v2/guide... ;
• 不使用第三方庫，如 Animate.css, Velocity.js ;
• 貝塞爾曲線（cubic-bezier），http://yisibl.github.io/cubic... 。

正文

• 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/el...

• 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...

  

  

最後：

• 過渡，能夠是景上添花，也能夠是 shit 。
• 歡迎評論區補充。