<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
<script>
let vm = new Vue({
el: "#app",
template:
'<div id="demo">' +
'<button v-on:click="show = !show">' +
"Toggle" +
"</button>" +
'<transition :appear="true" name="fade">' +
'<p v-if="show">hello</p>' +
"</transition>" +
"</div>",
data() {
return {
show: true,
};
},
});
</script>
transition组件功能：本身不提供动画，动画需要用户自己写；主要是在不同的情况下自动调用css，实现过渡效果；
一、流程
在transition组件的render阶段，执行render阶段，先通过插槽，拿到transition组件里的子节点；
拿到第一个子节点；
判断transition是否是一个组件的根节点
给p标签添加一个key属性_transition-1-p;
通过extractTransitionData方法获取一个值，并赋值给child.data.transition属性；
extractTransitions方法主要是，定义一个data对象，这个把所有vm.options.propsData（就是我们在占位符组件上定义的属性）都重新赋值给data。
如果有._partentListeners就是我们在占位符组件上调用的监听事件，也可以说是钩子函数，before-enter、enter、after-enter、enter-cancelled等等；
最后一个返回一个子节点的vnode，vnode.data.transition是有值的；
然后我们会执行invokeCreateHooks方法，然后就会调用_enter函数，然后因为vnode.data.show是undefined，所以执行enter(vnode）；
在enter方法中，会执行resolveTransition方法，它会给这个对象拓展很多属性，比如enterAcitveClass；
拿到过渡动画，即我们定义的css；
"fade-enter"
fade-enter-active"
"fade-enter-to"
然后开始获取钩子函数，但是因为我们没有定义transition组建的钩子函数，所以都为undefined；
先执行beforeEnterHook，因为没有定义钩子函数，所以不执行；
然后给el也就是p标签添加startSlass， 也就是我们自己定义的fade-enter css属性，
然后再添加fade-enter-active属性；
然后会执行nextFrame，
先把startClass 即fade-start给删除掉，因为已经到了active的时候了。
然后再吧toClass添加进去；
然后等到css属性里的transition执行完，开始执行whenTRansitionEnd方法；
所以说呀，动画过渡这些效果还是css本生提供的，vue只是帮助我们自动在合适的时机调动这个css而已；
这个方法主要是执行我们定义的cb回调函数；
然后这个回调函数把toClass和activeClass都删除掉；
然后如果有afterEnterHook钩子还会调用；
然后结束；
二、总结
标签：13,vue,transition,源码,fade,enter,active,data,css From： https://www.cnblogs.com/EricShen/p/16592676.html