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

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

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

相关文章
|
7月前
|
前端开发 JavaScript 开发者
CSS进阶-过渡与动画的事件监听
【6月更文挑战第16天】**CSS过渡和动画事件增强交互性,但监听与控制需谨慎。了解`transitionend`用于CSS过渡结束时的响应,避免过度使用JavaScript检测变化。示例代码展示如何绑定`transitionend`事件并在结束后执行操作。对于CSS动画,理解`animationstart`, `animationiteration`, `animationend`事件的生命周期至关重要,确保在动画结束后进行适当的清理。通过这些技巧,优化用户体验并提高代码效率。**
78 5
|
6月前
|
JavaScript
vue 动画 —— 滚动动画
vue 动画 —— 滚动动画
76 0
|
8月前
|
JavaScript 前端开发 UED
动画效果:给 Vue 应用添加过渡和动画
【4月更文挑战第22天】Vue 框架提供强大的过渡和动画功能,增强用户体验,创建流畅的用户界面。通过CSS动画、设置过渡属性和自定义过渡,开发者能实现多样化效果。同时,结合组件状态、关注性能并测试优化,确保在不同设备上运行良好,打造引人入胜的应用交互。
141 2
|
8月前
|
前端开发 JavaScript API
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
129 0
|
8月前
|
JavaScript 前端开发
jQuery 第五章(效果,滑动,动画,停止动画)
jQuery 第五章(效果,滑动,动画,停止动画)
91 0
|
JavaScript
原生js实现一个节流函数和防抖函数?
原生js实现一个节流函数和防抖函数?
79 0
|
JavaScript 前端开发
【jQuery动画】停止动画、淡入淡出、自定义动画
动画队列中所有动画都是按照顺序执行的,默认只有当前的一个动画执行完毕,才会执行后面的动画。为此,jQuery提供了stop()方法用于停止动画效果。通过此方法,可以让动画队列后面的动画提前执行。
|
前端开发 JavaScript
学习Vue3 第二十一章(transition动画组件)
自定义 transition 过度效果,你需要对transition组件的name属性自定义。并在css中写入对应的样式
428 0
|
JavaScript 前端开发 开发者
动画-钩子函数实现小球半场动画|学习笔记
快速学习动画-钩子函数实现小球半场动画
137 0
动画-钩子函数实现小球半场动画|学习笔记