Vue动画实现

在需要添加动画的DOM上，添加transition属性

例如

<div class="list" v-show="show" transition="fade"></div>

在CSS中，只需要通过如下方式即可添加淡入淡出动画

&.fade-transition    transition:all 0.1s    opacity:1    background:rgba(240,20,20,0.5)&.fade-enter,&.fade-leave    opacity:0    background:rgba(240,20,20,0)

需要更改进入和离开的效果，就在&.fade-enter和&.fade-leave中写代码。

添加旋转和抛物线效果：

 抛物线效果主要是用到了cubic-bezier运动

&.fold-transition    transition: all 0.3s cubic-bezier(0.5,-0.3,0.75,0.4)    transform:translate3d(0,-100%,0)&.fold-enter,&.fold-leave    transform: translate3d(0,0,0)

Vue动画还可以通过js绑定

通过在DOM绑定属性

<div transition="move">    <div class="inside inside-hook"></div></div>

在Vue实例中添加属性：

transitions: {    move： {        beforeEnter(el) {}，        enter(el) {el},        afterEnter(el) {}    }}

通过实现以上三个方法即可。