Vue.js 过渡动画

动画的阶段

具体请参考文档
https://cn.vuejs.org/v2/guide/transitions.html

1. css实现过度

• transition 动画

css改变透明度动画

• css-transform动画

css-transform动画

• 动态组件

动态组件,mode为默认

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式
in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
默认情况下是 in-out

上述动画,如果设置mode="out-in"

实现效果为:

mode="out-in"

注意:如果两个标签名相同,是不会执行动画的,若想执行动画,需要给标签设置不同的key来加以区分

动画效果为:

两个标签名相同的动画,未设置不同的key

如果设置了不同的key,就可以执行动画了

两个标签名相同的动画,设置不同的key

2. js实现过渡

具体看官方教程,写的比较详细 JavaScript 钩子
Vue.js中引入jQuery教程:http://www.cnblogs.com/Yann001/p/6850698.html

当让标签隐藏时,执行的是leave动画;
当让标签显示时,执行的是beforeEnter,enter动画

js过渡动画

• 在学习饿了么外卖app时,发现这样写也可以,
  给要执行动画的标签添加transition

在CSS代码中

    .detail
      ......
      &.fade-transition
        opacity: 1
        background: rgba(7, 17, 27, 0.8)
      &.fade-enter,&.fade-leave
        opacity: 0
        background: rgba(7, 17, 27, 0)

这样就可以简单的实现一个背景透明度过度的动画