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

简介: 快速学习钩子函数实现半场动画的介绍

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

相关文章
|
Python 容器
Python collections模块之Counter()详解
Python collections模块之Counter()详解
332 3
|
7月前
|
网络协议 安全 网络安全
雷池WAF+emby+ddnsgo搭建个人影音库,实现远程安全访问流媒体
雷池WAF+emby+ddnsgo搭建个人影音库,实现远程安全访问流媒体
559 5
|
Java 程序员 测试技术
项目构建工具
项目构建工具
233 1
|
移动开发 前端开发
基于jeecg-boot的flowable流程审批时增加下一个审批人设置
基于jeecg-boot的flowable流程审批时增加下一个审批人设置
1185 0
|
移动开发 HTML5
可达鸭举牌网页版本在线生成源码html5
可达鸭举牌网页版本,在线生成源码,点击分享即可制作DIY自己的举牌文字网页,需要GIF动图的自行用GIF图片录制工具录制下来。
270 1
可达鸭举牌网页版本在线生成源码html5
|
机器学习/深度学习 人工智能 算法
探索软件测试的未来:AI与自动化的融合
【10月更文挑战第15天】在数字化时代的浪潮中,软件测试作为保障软件质量的重要手段,正经历着前所未有的变革。随着人工智能(AI)技术的快速发展和自动化测试工具的不断完善,传统的测试方法正在被重新塑造。本文将深入探讨AI如何赋能软件测试,提升测试效率和准确性,以及自动化测试的未来趋势。我们将通过实际案例,揭示AI与自动化测试相结合的强大潜力,为读者描绘一幅软件测试领域的未来蓝图。
|
机器学习/深度学习 人工智能 搜索推荐
人工智能:重塑未来,驱动效率革命
人工智能(AI)是模拟人类智能的技术,让计算机执行需智能才能完成的任务,如理解语言、学习和推理。通过复杂算法,AI能分析大量数据并作出决策。例如,使用`scikit-learn`库训练分类器识别鸢尾花种类。AI未来发展将涉及技术创新如深度与强化学习、应用拓展至医疗健康、智能制造等领域、以及社会影响如就业结构变化和教育变革。AI的优势包括自动化流程、高效数据分析、智能决策、个性化服务及跨领域融合,这些均显著提升了工作效率和社会发展。
|
编译器 芯片
计算机中CPU 架构
【7月更文挑战第27天】
531 2
|
Unix 编译器 Go
|
小程序 开发者
微信小程序备案流程
备案入口、备案类型、备案材料准备、备案信息填写、个人备案、非个人备案
4175 0
微信小程序备案流程