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 。
• 欢迎评论区补充。