Vue动画

1、使用过渡类名
需求：点击按钮，让 h3 显示，再点击，让 h3 隐藏
第一步：使用 transition 元素，把 需要被动画控制的元素，包裹起来

    <transition>
            <h3 v-if="flag">这是一个h3</h3>
    </transition>

第二步：自定义两组样式，来控制 transition 内部的元素实现动画

<style>
    /* v-enter  【这是一个时间点】 是进入元素之前，元素的起始状态，此时还没有开始进入 */
    /* v-leave-to  【】  是动画离开之后，离开的终止状态， 此时，元素 动画已经结束了*/

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

    /* v-enter-active【入场动画的时间段】 v-leave-active【出场动画的时间段】 */
    .v-enter-active,
    .v-leave-active{
        transition: all 0.8s ease;
    }

第三步：实现按钮点击事件，控制动画的出现与隐藏

<input type="button" value="toggle" @click="flag = ! flag">

2、修改v-前缀

<!-- 自定义两组类来实现动画 ，给个name属性，把v-前缀替换掉  -->
        <transition name="my">
                <h6 v-if="flag2">这是一个h6</h6>
        </transition>

自定义两组样式，来控制 transition 内部的元素实现动画

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

        /* my-enter-active【入场动画的时间段】 my-leave-active【出场动画的事件段】 */
        .my-enter-active,
        .my-leave-active{
            transition: all 0.8s ease;
        }

3、使用第三方类animate.css实现动画
在animate官网中找自己需要的动画

这里以bounceIn、bounceOut为例，入场使用 bounceIn 离场使用 bounceOut 。
第一步：引入第三方包

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

第二步：使用 :duration=“毫秒值” 来统一设置 入场和离场时候的动画时长

<transition 
        enter-active-class="bounceIn" 
        leave-active-class="bounceOut" 
        :duration="{ enter:200 , leave:400 }">
            <h3 v-if="flag" class="animated">这是一个h3</h3>
        </transition>

4、使用钩子函数模拟小球半场动画
第一步：使用transition 元素把 小球包裹起来

<transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">

            <div class="ball" v-show="flag"></div>
        </transition>

第二步：在script中调用钩子函数且实现方法

<script>
        
        Vue.directive()

        var vm = new Vue({
            el:'#app',
            data:{
                flag:false
            },
            methods:{
                // 注意： 动画钩子函数的第一个参数 :el，表示 要执行动画的那个DOM元素，是个原生的 js DOM对象
                // 大家可以认为，el 是通过 document.getElementById('')方式获取到的原生JS DOM对象
                beforeEnter(el){
                    // 表示动画入场之前，此时，动画尚未开始，可以 在beforeEnter中，设置元素开始动画之前的起始样式
                    // 设置 小球开始动画之前的，起始位置
                    el.style.transform = "translate(0,0)"
                },
                enter(el,done){
                    // 这句话没有实际作用， 但是， 如果不写，出不来动画效果
                    // 可以认为 el.offsetWidth 会强制动画刷新
                    el.offsetWidth
                    // enter 表示动画 开始之后的样式，这里，可以设置小球完成之后的，结束状态
                    el.style.transform = "translate(150px,450px)"
                    el.style.transition = "all 1s ease"

                    // 这里的done ，其实就是我们的afterenter 这个函数，也就是说，done 是afterenter这个函数的引用
                    done()
                },
                afterEnter(el){
                    // 动画完成之后，会调用 afterEnter

                    this.flag = ! this.flag
                }
            }
        })
    </script>

5、列表动画
注意：
1、在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transition-group
2、如果要为 v-for循环创建的元素设置动画，必须为每一个元素设置 :key属性
第一步：包裹元素

 <!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候 页面的入场效果
	通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的
    元素，如果不指定 tag 属性，默认渲染为span 标签  -->
 <transition-group appear tag="ul">
     <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
         {{ item.id }}------{{ item.name }}
     </li>
 </ttransition-group>

注意：del()方法在Vue实例的methods中

del(i){
	this.list.splice(i,1)
}

第二步：设置动画，在style标签中

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

        .v-enter-active,
        .v-leave-active{
            transition: all 0.6s ease;
        }

第三步：让后续列表渐渐飘上来

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

        .v-leave-active{
            position: absolute;
        }