vue过渡与动画

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>