<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钩子还会调用;
然后结束;
二、总结
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/280945.html