二十四、Vue动画的基础使用

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

• 在 CSS 过渡和动画中自动应用 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

单元素/组件过度

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

vue提供了6个过渡类名

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

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

3、v-enter-to定义进入过渡的结束状态。

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

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

6、v-leave-to：定义离开过渡的结束状态。

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>

<div id="app">
    <button v-on:click="isShow = !isShow">切换</button>
    <transition name="fade">
        <p v-if="isShow">hello</p>
    </transition>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    });
</script>

CSS过渡

<style>
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(10px);
        opacity: 0;
    }
</style>

<div id="app">
    <button v-on:click="isShow = !isShow">切换</button>
    <transition name="slide-fade">
        <p v-if="isShow">hello</p>
    </transition>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    });
</script>

css动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<style>
    .bounce-enter-active {
        animation: bounce-in .5s;
    }
    .bounce-leave-active {
        animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }
</style>

<div id="app">
    <button v-on:click="isShow = !isShow">切换</button>
    <transition name="bounce">
        <p v-if="isShow">hello</p>
    </transition>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    });
</script>

注：本篇案例完全来自于官方文档