vue --- 动画执行的周期(动画的钩子函数)

如下8个:

<transitionv-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>

举个栗子:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="../node_modules/animate.css/animate.css"><style>.ball {width: 15px;height: 15px;border-radius: 50%;background-color: red;}</style>
</head><body><div id="app"><input type="button" value="快到碗里来" @click="flag=!flag"><transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"><div class="ball" v-if="flag"></div></transition></div><script src="../node_modules/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: false},methods: {beforeEnter(el) {// 设置小球 开始动画的起始位置el.style.transform = "translate(0,0)"},enter(el, done) {// el.offsetWidth 会强制动画刷新el.offsetWidth;el.style.transform = "translate(150px, 450px)";el.style.transition = "all 1s ease";// done是afterEnter函数的引用...表示结束了 立即调用afterEnter()done()},afterEnter(el) {this.flag = false;}},})</script>
</body></html>

vue --- 动画执行的周期(动画的钩子函数)相关推荐

Vue 分别使用过渡类名 animate.css 钩子函数等实现动画效果
1. 使用过渡类名实现动画 v-enter: 进入之前元素的起始状态,还没有进入 v-enter-to: 定义进入过渡的结束状态 v-enter-active:定义进入过渡生效时的状态 v-leave ...
vue函数如何调用其他函数?_从源码中学Vue（一）生命周期中的钩子函数的那点事儿...
欢迎来到我的<从源码中学Vue>专题系列文章,更多精彩内容持续更新中,欢迎关注 :) Vue作为当下前端最流行的框架之一,在国内占绝对的优势.所以接下来我们一起来学习它吧! 我不会像其它人 ...
一次性搞懂Vue生命周期的八大钩子函数
何为钩子函数?先看官方文档的说法: 每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也 ...
vue.js框架的生命周期：常用钩子函数
//组件实例化之前执行的函数 beforeCreate:function () { alert("组件实例化之前执行的函数") }, //组件实例化完毕执行的函数 created: ...
vue生命周期方法（钩子函数）初始化数据一般写在哪里
created(el没有初始化,数据已加载完成):mounted(el没有初始化,数据已加载完成): mounted(el没有初始化,数据已加载完成):mounted(el已被初始化,数据已加载完成) ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
mysql 钩子函数_你想了解的Hive Query生命周期--钩子函数篇！
前言无论Hive Cli还是HiveServer2,一个HQl语句都要经过Driver进行解析和执行,粗略如下图: Driver处理的流程如下: HQL解析(生成AST语法树) => 语法分析 ...
vue动画过渡 javascript钩子函数详解
vue动画过渡js钩子函数详解前言 js钩子函数运行时间 js钩子函数的过渡或动画总结结语前言转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...
vue生命周期，vue执行顺序图，钩子函数
一.生命周期导图通过代码,理解生命周期,查看钩子函数的执行顺序注:复制就可以运行查看 <!DOCTYPE html> <html> <head><titl ...

vue --- 动画执行的周期(动画的钩子函数)

vue --- 动画执行的周期(动画的钩子函数)相关推荐

最新文章

热门文章