Vue 常用的过渡

前言

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

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

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

正文

• 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/dev/src/transitions/collapse-transition.js

• 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/master/assets/scss/transition.scss

最后：

• 过渡，可以是景上添花，也可以是 shit 。
• 欢迎评论区补充。