Vue 分别使用过渡类名 animate.css 钩子函数等实现动画效果

1. 使用过渡类名实现动画

1. v-enter: 进入之前元素的起始状态，还没有进入
2. v-enter-to: 定义进入过渡的结束状态
3. v-enter-active:定义进入过渡生效时的状态
4. v-leave:定义离开过渡的开始状态
5. v-leave-to: 动画离开之后，离开的终止状态，此时元素动画已结束
6. v-leave-enter: 定义离开过渡生效时的状态

   <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- 使用Vue官方提供的transition元素，将需要被动画控制的元素包裹起来 -->
        <transition name="fade"> 
            <h3 v-if="flag">哈哈哈</h3>
        </transition>
    </div>
    <script>
        var vm =new Vue ({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        })
    </script>

同时，在head部分定义样式

<!-- 自定义两组样式，来控制transition内部的元素实现动画 -->
    <style>
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }
        /* fade-enter-active: 入场动画的时间段
        fade-leave-active： 离场动画的时间段 */
        .fade-enter-active,
        .fade-leave-active {
            transition: all 2s ease;
        }
    </style>

注： 若transition未加name属性，则过渡的类名均以 v- 开头，且定义的样式多个 transition可以共用

2.使用第三方animate.css类库

自定义过渡的类名：

1. enter-class
2. enter-active-class
3. enter-to-class
4. leave-class
5. leave-active-class
6. leave-to-class

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

   <div id="app2">
        <input type="button" value="toggle" @click="flag=!flag">
        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">     //  注：要加animated
            <h3 v-if="flag">哈哈哈</h3>
        </transition>
    </div>

3. JS钩子函数 （可实现半场动画，上面两种方法都无法实现）

<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"
>
</transition>

例子：实现小球半场动画

<div id="app">
        <input type="button" value="跳跳糖" @click="flag=!flag">
        <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                // 注意：动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素，是个原生的 JS DOM对象
                beforeEnter(el) {
                    // 动画入场之前，此时动画尚未开始，可以在beforeEnter中设置元素开始之前的起始样式
                    el.style.transform = "translate(0,0)"    // 设置小球开始动画之前的起始位置
                },
                enter(el, done) {
                    el.offsetWidth   // 这句话无实际作用，但若不写则出不来动画效果 offsetHeight offsetTop offsetLeft都可以
                    // 动画开始之后的样式，在这里可以设置小球完成动画之后的结束状态
                    el.style.transform = "translate(150px, 450px)"
                    el.style.transition = 'all 1s ease'
                    done()  //  这里的 done 其实就是afterEnter函数的引用，不可缺少
                },
                afterEnter(el) {
                    // 动画完成之后，会调用
                    this.flag = !this.flag
                }
            }
        })
    </script>

4. 采用transition-group实现列表动画

例子

<div id="app">
       <div>
           <label>
               Id:
               <input type="text" v-model="id">
           </label>
           <label>
               Name:
               <input type="text" v-model="name">
           </label>
           <input type="button" value="添加" @click= "add()">
       </div>
       
        <ul>
            <!-- 在实现列表过渡的时候，如果需要过渡的元素是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
            <!--  如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性 -->
            <transition-group>
                <li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}} --{{item.name}} </li>
            </transition-group>
        </ul>
   </div>

<script>
       var vm = new Vue({
           el: '#app',
           data: {
               id:'',
               name:'',
               list: [
                   {id:1, name:'小明'},
                   {id:2, name:'小红'},
                   {id:3, name:'小黄'}
               ]
           },
           methods: {
               add() {
                   this.list.push({id: this.id, name: this.name})
                   this.id = this.name = ''
               },
               del(i) {
                   this.list.splice(i,1)
               }
           }
       })
   </script>

<style>
        li {
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
        }
        /* 下面的 .v-move 和.v-leave-active 配合使用，能够实现列表后续的元素渐渐的飘上来的效果 */
        .v-move {
            transition: all 1s ease;
        }
        .v-leave-active {
            position: absolute;
        }
    </style>

注：

1. 给transition-group 添加apper 属性，可实现页面入场时候的效果

        <ul>
            <transition-group appear>
                <li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}} --{{item.name}} </li>
            </transition-group>
        </ul>

2. transition-group 会被默认渲染为span元素，可通过设置 tag 属性，使transition-group 渲染为指定的元素

       <!-- <ul> -->
            <transition-group appear tag="ul">
                <li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}} --{{item.name}} </li>
            </transition-group>
        <!-- </ul> -->