使用vue制作动画效果

1：使用v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active进行类名绑定，transition会直接找到这几个类名。

2：给组件起名字比如one-enter,one-enter-to,one-enter-active,然后依据‘1’进行绑定。

3：使用自己已经写好的类名进行绑定，名称自己取。（直接写在transition属性中）

.a{
	opacity: 0;
 }
 .b{
     opacity: 1;
     margin-left: 500px;
 }
 .c{
     transition: all 3s;
 }

<div id="app">
    <button @click="toggle">我是按钮</button>
    <transition appear
                enter-class="a"
                enter-active-class="c"
                enter-to-class="b">
        <div class="box" v-show="isShow"></div>
    </transition>
</div>

4：通过Vue提供的JS钩子来实现过渡动画

各种钩子函数：
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” 离开动画被取消

<div id="app">
    <button @click="toggle">我是按钮</button>
    <!--
    注意点: 虽然我们是通过JS钩子函数来实现过渡动画
            但是默认Vue还是回去查找类名, 所以为了不让Vue去查找类名
            可以给transition添加v-bind:css="false"
    -->
    <transition appear
                v-bind:css="false"
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter">
        <div class="box" v-show="isShow"></div>
    </transition>
</div>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            isShow: true
        },
        // 专门用于存储监听事件回调函数
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            },
            beforeEnter(el){
                // 进入动画开始之前
                console.log("beforeEnter");
                el.style.opacity = "0";
            },
            enter(el, done){
                // 进入动画执行过程中
                console.log("enter");
                /*
                注意点: 如果是通过JS钩子来实现过渡动画
                        那么必须在动画执行过程中的回调函数中写上
                        el.offsetWidth / el.offsetHeight
                * */
                // el.offsetWidth;
                el.offsetHeight;
                el.style.transition = "all 3s";
                /*
                注意点: 动画执行完毕之后一定要调用done回调函数
                        否则后续的afterEnter钩子函数不会被执行
                * */
                // done();
                /*
                注意点: 如果想让元素一进来就有动画, 那么最好延迟以下再调用done方法
                * */
                setTimeout(function () {
                    done();
                }, 0);
            },
            afterEnter(el){
                // 进入动画执行完毕之后
                console.log("afterEnter");
                el.style.opacity = "1";
                el.style.marginLeft = "500px";
            }
        },
        // 专门用于定义计算属性的
        computed: {
        }
    });