【Vue.js 入门与实战】--钩子函数实现半场动画的介绍

简介: 一、使用钩子函数原因二、半场动画举例

钩子函数实现半场动画的介绍

 

目录

一、使用钩子函数原因

二、半场动画举例

 

一、使用钩子函数原因

本节学习第三种实现动画的方式,第一种是自定义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”代表一个事件,每一个事件都需要对应一个函数。如果我们只需要半场动画,那只需要写入场函数,而不需要写离场函数。

相关文章
|
6天前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
23 0
|
12天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
4天前
|
JavaScript 前端开发 Java
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
13 0
|
6天前
|
JavaScript
学习Node.js入门范例
然后,cmd中运行命令node E:/Test/server.js
9 2
|
6天前
|
IDE JavaScript 开发工具
Auto.js 开发入门
Auto.js 开发入门
|
8天前
|
前端开发 JavaScript
前端 JS 经典:函数管道
前端 JS 经典:函数管道
5 0
|
11天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
11天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
11天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
22 1
|
12天前
|
JavaScript 前端开发 网络架构
函数柯里化:JavaScript中的高级技巧
函数柯里化:JavaScript中的高级技巧