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

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

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

相关文章
|
4月前
|
JavaScript
vue 动画 —— 滚动动画
vue 动画 —— 滚动动画
65 0
|
6月前
|
JavaScript 前端开发 UED
动画效果:给 Vue 应用添加过渡和动画
【4月更文挑战第22天】Vue 框架提供强大的过渡和动画功能,增强用户体验,创建流畅的用户界面。通过CSS动画、设置过渡属性和自定义过渡,开发者能实现多样化效果。同时,结合组件状态、关注性能并测试优化,确保在不同设备上运行良好,打造引人入胜的应用交互。
132 2
|
6月前
|
JavaScript
Vue中的过渡效果和动画有何不同?
Vue中的过渡效果和动画有何不同?
40 3
|
6月前
|
JavaScript 前端开发
描述 Vue 中的过渡效果和动画。
描述 Vue 中的过渡效果和动画。
22 0
|
前端开发 JavaScript
Vue 学习笔记二 动画
Vue 学习笔记二 动画
54 0
|
JavaScript 前端开发
vue过渡及动画
对于vue中的过渡与动画,官网上是这样概述的: Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 简言之:vue动画就是 操作 css 的 trasition 或 animation vue 会给目标元素添加/移除特定的 class
73 0
|
JavaScript
Vue过渡与动画的实现效果
Vue过渡与动画的实现效果
|
JavaScript
Vue 过渡与动画的使用
Vue 过渡与动画的使用
|
JavaScript 前端开发
[Vue]动画与过渡(二)
[Vue]动画与过渡(二)