开发者学堂课程【Vue.js 入门与实战:钩子函数实现半场动画的介绍】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8167
钩子函数实现半场动画的介绍
目录
一、使用钩子函数原因
二、半场动画举例
一、使用钩子函数原因
本节学习第三种实现动画的方式,第一种是自定义V-类,第二种是使用animate类,但前面两种都是完整的动画,有进入有离开。但有的时候我们只需要进去的动画不需要离开的动画,就是半场动画。这是我们第一种和第二种都无法实现的半场动画,(半场动画举例:加入购物车,左右表示加减购物车,当你点击加入时,物品弹入购物车,没有出去,这就是半场动画,只有进场,没有出场)此时,只能借助钩子函数。
二、半场动画举例
#JavaScript钩子 可以在属性中声明JavaScript钩子 <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>
以上部分代码,叫做离场的钩子函数。
在执行的时候,有前后顺序,为一个周期。其中“V-on”代表一个事件,每一个事件都需要对应一个函数。如果我们只需要半场动画,那只需要写入场函数,而不需要写离场函数。