vue中的动画

过渡类名实现动画

过渡类名

在vue中有以下过渡类名

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

六个阶段的具体关系如下：

具体实现

在HTML中使用<transition></transition>（单一组件）或者<transition-group></transition-group>（多组件）包裹需要动画效果的组件。

<ul>
    <transition-group>
        <li v-for="item in list" :key="item.ID">
            <p>{{item.ID}}---{{item.name}}</p>
        </li>
    </transition-group>
</ul>

在css中通过类名设置动画效果

.v-enter,
.v-leave-to{
     opacity: 0;
     transform: scale(1.5)
}
.v-enter-active,
.v-leave-active{
    transition: all 0.5s ease
}

效果如下：

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

可以借用一些第三方css动画库如Animate.css

半场动画

初始状态到结束状态的动画称之为半场动画

通过使用JavaScript 钩子可以实现半场动画

可以在 attribute 中声明 JavaScript 钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
<!--这里包裹的是执行动画的元素-->
<div class="ball" v-if="flag"></div>
</transition>

在JavaScript中定义动画效果

// el表示要执行动画的DOM 元素
beforeEnter(el){
    // 动画入场之前,设置动画的其实样式
    el.style.transform = "translate(0,0,)";
},
enter(el,done){
// 没有实际作用,不加没有效果
    el.offsetWidth;
    el.style.transform = "translate(150px,450px)";
    el.style.transition = "all 1s ease";
    //回调函数，会在执行成功后执行，可选
    done()
},
afterEnter(){
    this.flag = !this.flag
}

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

可以配合使用第三方 JavaScript 动画库，如 Velocity.js

效果如下：