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 ：