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:;
        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:;
        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;
             }
         }
     });