vue 动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下几种常见的方式：

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

 

附上官方的动画状态图：

 

说明：

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 被删除)，在过渡/动画完成之后移除。

 

一、使用css过渡动画

css部分：

    <style>
        /* v-enter 一个时间点，进入之前，元素其实状态，此时还没有进入 */
        /* v-leave-to 时间点，动画离开之后，离开的种子状态，此时元素动画已经结束 */
   .v-enter,
   .v-leave-to
   {
       opacity:0;
       transform: translateX(150px)
   }
    /* v-enter-active 入场动画时间段 */
    /* v-leave-active 离场动画时间段 */
   .v-enter-active,
   .v-leave-active{
       /* 让动画有个过渡的渐变效果 */
      transition:all 0.4s ease; 
   }

HTML部分：

    <div id="app">
        <button type="button" @click="flag=!flag">切换</button>

        <!-- 1.使用transition标签包裹需要被动画控制得元素，vue提供 -->
        <transition>
            <p v-if="flag">这是个p标签</p>
        </transition>
    </div>

JS部分：

    var app = new Vue({
        el: "#app",
        data() {
            return {
                message: 'hello!',
                flag: false,
            }
        },
        methods: {
            sayHi() {
                console.log("hello");
            }
        }
    });

 

当然还可以自定义v-前缀，默认使用的是vue内置的类来控制transition标签的动画。

CSS部分：

   /* 在 transition 标签中加个 name='my' 属性，可局部自定义动画 */
   .my-enter,
   .my-leave-to
   {
       opacity:0;
       transform: translateY(300px)
   }

   .my-enter-active,
   .my-leave-active{
       /* 让动画有个过渡的渐变效果 */
      transition:all 0.4s ease; 
   }

HTML部分：

    <button type="button" @click="flag2=!flag2">切换2</button>

    <!-- 1.使用transition标签包裹需要被动画控制得元素，vue提供，加了个 name='my' -->
    <transition name="my">
        <p v-if="flag2">这是个p2标签</p>
    </transition>

 

二、使用第三方css动画库实现

引入第三方动画库

 <link rel="stylesheet" href="../lib/animate.css">

css部分不用自定义了..

HTML部分：

    <button type="button" @click="flag=!flag">切换</button>

    <!-- 使用 :duration="毫秒值" 来控制进场和离场的时长 -->
    <transition 
        enter-active-class="bounceIn" 
        leave-active-class="bounceOut" 
        :duration="{enter:200,leave:400}">
        <p v-if="flag" class="animated">这是个p2标签</p>
    </transition>

JS部分：

    var app = new Vue({
        el: "#app",
        data() {
            return {
                message: 'hello!',
                flag: false,
                flag2: false
            }
        },
        methods: {
            sayHi() {
                console.log("hello");
            }
        }
    });

 

四、使用js钩子函数实现

需求：点击  【切换】 按钮，一个黄色的小球会从（0,0）位置移动到（150px,450px）位置中去然后消失。

CSS部分：

    <style>
        .ball{
            width:30px;
            height:30px;
            border-radius: 50%;
            background-color: yellow;
        }
    </style>

HTML部分：

    <div id="app">
        <button type="button" @click="flag=!flag">切换</button>

        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div v-if="flag" class="ball"></div>
        </transition>
    </div>

JS部分：

    var app = new Vue({
        el: "#app",
        data() {
            return {
                flag: false,
            }
        },
        methods: {
            beforeEnter(el) {
                console.log("beforeEnter")
                el.style.transform = "translate(0,0)";
            },
            enter(el, done) {

                console.log("enter")
                // 强制动画的使用
                el.offsetWidth
                el.style.transform = "translate(150px,450px)"
                el.style.transition = "all 1s ease"

                // 这个done就是afterEnter的函数引用
                done()
            },
            afterEnter(el) {
                console.log("afterEnter")
                this.flag = !this.flag;
            }
        }
    });