Vue.js 动画

组件的过渡

• 条件的渲染（使用v-if）
• 条件的展示（使用v-show）
• 动态组件
• 组件根节点

链接地址下载：

css过渡

下面是一个运用css点击显示隐藏显示的2s动画效果：

  

    点击
    
      
侠课岛-vue动画课程
    
  

过渡理解

当使用/删除包含在transition组件中的元素时，Vue将会做的处理：

• 首先会先嗅探一下这个目标元素是否使用CSS过渡或动画，在使用的时候添加或者删除CSS类名。
• 如果没有检测到这个CSS过渡或动画，DOM操作（插入或删除）会直接执行下一帧，而不会在这一帧继续执行。

过渡动画CSS的类名

• v-enter，定义进入过渡的开始状态
• v-enter-active，定义过渡的状态，在元素的整个过渡过程中作用，在元素被插入时生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
• v-enter-to，定义进入过渡的结束状态，在元素被插入一帧后生效（与此同时v-enter被删除），在transition/animation完成之后移除。
• v-leave，定义离开过渡的开始状态，在离开过渡被触发时生效，在下一个帧移除。
• v-leave-active，定义过渡的状态，在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在transition/animation完成之后移除，这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
• v-leave-to，定义离开过渡前的结束状态，在离开过渡被触发一帧后生效（与此同时v-leave被删除），在transition/animation完成之后移除。

更多学习参考：https://www.9xkd.com/site/search.html?key=vue