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

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

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

相关文章
|
9月前
|
Web App开发 存储 JSON
Vue 学习笔记三、触摸事件、轮播图
Vue 学习笔记三、触摸事件、轮播图
75 0
|
1月前
|
JavaScript 前端开发 容器
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
Vue 的 `Transition` 和 `TransitionGroup` 是用于状态变化过渡和动画的组件。`Transition` 适用于单一元素或组件的进入和离开动画,而 `TransitionGroup` 用于 v-for 列表元素的增删改动画,支持 CSS 过渡和 JS 钩子。
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
|
1月前
|
存储 前端开发 JavaScript
在回调函数中重新渲染React组件
在React中,重新渲染组件可通过`forceUpdate()`或`ReactDOM.render()`实现。方法一是使用`forceUpdate`强制无状态组件更新;方法二是通过重新创建根组件实例适用于有状态组件。这些示例基于Webpack和Babel的模块热替换配置。根据项目需求和React版本,还可以结合React-Router或Redux等库选择合适的方法。
|
1月前
|
JavaScript 前端开发 UED
动画效果:给 Vue 应用添加过渡和动画
【4月更文挑战第22天】Vue 框架提供强大的过渡和动画功能,增强用户体验,创建流畅的用户界面。通过CSS动画、设置过渡属性和自定义过渡,开发者能实现多样化效果。同时,结合组件状态、关注性能并测试优化,确保在不同设备上运行良好,打造引人入胜的应用交互。
|
1月前
|
JavaScript
Vue中的过渡效果和动画有何不同?
Vue中的过渡效果和动画有何不同?
23 3
|
1月前
|
JavaScript 前端开发
描述 Vue 中的过渡效果和动画。
描述 Vue 中的过渡效果和动画。
13 0
|
1月前
|
前端开发
使用react实现一个简易的小球动画
使用react实现一个简易的小球动画
34 0
|
1月前
|
前端开发
react函数组件购物车小球动画实现
react函数组件购物车小球动画实现
48 0
react函数组件购物车小球动画实现
|
9月前
|
前端开发 JavaScript 算法
为什么改变react状态,会触发组件重新渲染?
为什么改变react状态,会触发组件重新渲染?
115 2
|
9月前
|
前端开发 JavaScript
Vue 学习笔记二 动画
Vue 学习笔记二 动画
36 0