钩子函数实现半场动画的介绍|学习笔记

开发者学堂课程【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”代表一个事件，每一个事件都需要对应一个函数。如果我们只需要半场动画，那只需要写入场函数，而不需要写离场函数。