Vue 过渡动画 基础

<transition></transition>

transition标签是vue封装的组件，

ps:
1.想要页面也进入就有过渡动画，就在标签里加上 appear 属性
2.标签只能放一个元素

css过渡

有6个类（没有给 transition 标签 添加 name 属性时，以 v- 为前缀，有name的话，替代 v
		也用 name 来区分不同的标签）
	.v-enter   .v-enter-to   .v-enter-active
	.v-leave   .v-leave-to   .v-leave-active`

		.v-enter {
            opacity: 0;
        }

        .v-enter-to {
            opacity: 1;
        }

        .v-enter-active {
            transition: all 3s;
        }

        .v-leave {
            opacity: 1;
        }

        .v-leave-to {
            opacity: 0;
        }

        .v-leave-active {
            transition: all 3s;
        }

js钩子函数

<transition 
	appear :css='false' 	
	v-on:before-enter="beforeEnter" 
	v-on:enter="enter"
	v-on:after-enter="afterEnter">
	<div id="block" v-show="isShow"></div>
</transition>

		var app = new Vue({
            el: '#app',
            data: {
                isShow: true
            },
            methods: {
                toggle: function () {
                    this.isShow = !this.isShow;
                },
                beforeEnter: function (el) {	//el指的是 transition 标签里的元素
                    el.style.opacity = '0';
                },
                enter: function (el, done) {
                    /*注意使用js钩子函数来实现过渡动画
                      那么必须在动画执行过程中的回调函数中写上
                      el.offsetWidth  /  el.offsetHeight;
                    */
                    el.offsetWidth;
                    el.style.transition = "all 3s";
                    /*
                        动画执行完毕后一定调用done回调函数
                        否则后续的afterEnter钩子函数不会被执行
                        文档说与CSS结合 done是可选的。
                    */
                    // done();

                    //这里设置定时器是因为想一进来就有过渡，属性里加了appear，done 晚一步进行
                    setTimeout(function () {
                        done();
                    })
                },
                afterEnter: function (el) {
                    el.style.opacity = '1';
                }
            }
        })