vue源码阅读—13—扩展之transition



 

 

    <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组件里的子节点;

vue源码阅读—13—扩展之transition

 

 拿到第一个子节点;

判断transition是否是一个组件的根节点

vue源码阅读—13—扩展之transition

 

给p标签添加一个key属性_transition-1-p;

vue源码阅读—13—扩展之transition

 

通过extractTransitionData方法获取一个值,并赋值给child.data.transition属性; 

vue源码阅读—13—扩展之transition

 

 extractTransitions方法主要是,定义一个data对象,这个把所有vm.options.propsData(就是我们在占位符组件上定义的属性)都重新赋值给data。

如果有._partentListeners就是我们在占位符组件上调用的监听事件,也可以说是钩子函数,before-enter、enter、after-enter、enter-cancelled等等;

vue源码阅读—13—扩展之transition

 

vue源码阅读—13—扩展之transition

 

 最后一个返回一个子节点的vnode,vnode.data.transition是有值的;

vue源码阅读—13—扩展之transition

 

 然后我们会执行invokeCreateHooks方法,然后就会调用_enter函数,然后因为vnode.data.show是undefined,所以执行enter(vnode);

vue源码阅读—13—扩展之transition

 

 在enter方法中,会执行resolveTransition方法,它会给这个对象拓展很多属性,比如enterAcitveClass;

vue源码阅读—13—扩展之transition

 

vue源码阅读—13—扩展之transition

 

 拿到过渡动画,即我们定义的css;

“fade-enter”

fade-enter-active”

“fade-enter-to”

vue源码阅读—13—扩展之transition

 

然后开始获取钩子函数,但是因为我们没有定义transition组建的钩子函数,所以都为undefined; 

vue源码阅读—13—扩展之transition

 

 先执行beforeEnterHook,因为没有定义钩子函数,所以不执行;

 vue源码阅读—13—扩展之transition

 

 然后给el也就是p标签添加startSlass, 也就是我们自己定义的fade-enter  css属性,vue源码阅读—13—扩展之transition

 

 然后再添加fade-enter-active属性;

vue源码阅读—13—扩展之transition

 

然后会执行nextFrame,

先把startClass 即fade-start给删除掉,因为已经到了active的时候了。

然后再吧toClass添加进去; 

vue源码阅读—13—扩展之transition

然后等到css属性里的transition执行完,开始执行whenTRansitionEnd方法;

所以说呀,动画过渡这些效果还是css本生提供的,vue只是帮助我们自动在合适的时机调动这个css而已;

vue源码阅读—13—扩展之transition

 

vue源码阅读—13—扩展之transition

 

 这个方法主要是执行我们定义的cb回调函数;

然后这个回调函数把toClass和activeClass都删除掉;

vue源码阅读—13—扩展之transition

 

 然后如果有afterEnterHook钩子还会调用;

vue源码阅读—13—扩展之transition

 

 然后结束;

 

 

 

 

 

 

二、总结

vue源码阅读—13—扩展之transition

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/280945.html

(0)
上一篇 2022年8月17日
下一篇 2022年8月17日

相关推荐

发表回复

登录后才能评论