vue过渡效果之--javascript钩子

Posted 2020-08-28 饭特稠

 

写在前面

姊妹篇  vue.js之过渡效果-css。今天一篇博文阅读量破300，心里还是有点小激动的。没错，我就是这么容易满足（害羞）。这个数据可能连大牛一篇文章阅读量的零头都没有，但这却是我个人的一大步，因为我在帮助别人。当然我没少受到别人文章的帮助。我想，也是大家这种乐于分享的心态让编程在一堆代码后面变得更加有人情味，前端变得更有意思。

什么是钩子

我当初看到钩子这个东西的时候也是一头雾水，尽管钩子这个翻译最初可能是想平易近人的，不让人望而生畏的。现在，就我的理解来说，钩子函数就像埋在一条道路上的一个个地雷，当达到某个状态的时候就会触发。

以实例生命周期为例，把实例想象成一个人，一个实例的生命周期包括beforeCreate(出生前)，created(胚胎阶段)，beforemount(分娩前)，mounted(出生了)，beforedestroy(挂之前)，destroyed(挂了)等，中间还有若干次update。这些阶段就是可以放钩子地雷的地方，哦，钩子函数的地方。

再细化场景：要做一个天气组件，数据要从api利用ajax请求得到，然后渲染到视图，那么这个工作就要在组件生命周期的created阶段进行，(

• created:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

)否则在mounted,挂载到元素上时就会因为没有数据而报错。这就要给created挂一个函数，让Vue在这个阶段调用，去请求ajax。像下面这样：

created：function() { 
            this.getWeather();//钩子函数，组件创建完成时调用getWeather方法获取天气信息

        }

 

过渡的钩子

 一个元素出现的过渡包括四个节点：before-enter，enter，after-enter，enter-cancelled，分别代表开始出现前，出现中，出现后。元素的离开也一样。借助V-on可以在这些节点挂载钩子函数，用于在元素过渡的各节点触发这些函数。

出现前主要用于配置一些参数：如将opacity设置为0，enter是进入的动画过程函数。同理before-leave是离开前的状态设置，leave对应的是消失的过程函数

以上钩子函数会被传入被过渡元素el作为第一个参数。

//来自官网的代码
<transition
  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"
>
  <!-- ... -->
</transition>

 

剩下的就是看Velocity.js文档了

还有我做(chao)的一个demo: