Vue 动画的钩子函数
<!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">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<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">
<!-- 1. 使用 transition 元素把 小球包裹起来 -->
<!-- 动画钩子函数的三个阶段 为每个阶段设置一个执行动画函数 -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div> <script> // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
// 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
// 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
beforeEnter(el){
// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
// 设置小球开始动画之前的，起始位置
el.style.transform = "translate(0, 0)",
console.log('动画开始---')
},
enter(el, done){
// 注意：这句话，没有实际的作用，但是，如果不写，出不来动画效果；
// 可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth
// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
el.style.transform = "translate(150px, 450px)"
el.style.transition = 'all 5s ease',
console.log('动画执行中---')
// 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
done()
},
afterEnter(el){
// 动画完成之后，会调用 afterEnter
// console.log('ok')
this.flag = !this.flag
console.log('动画执行完---')
}
}
});
</script>
</body> </html>
Vue 动画的钩子函数的更多相关文章
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- VueRouter和Vue生命周期(钩子函数)
一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...
- Vue -自定义指令&钩子函数
除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...
- vue之router钩子函数
模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...
- vue中的钩子函数的理解
接下来我们对几个钩子函数进行解释 beforeCreated:这个钩子函数实在vue实例创建后,触发的.这个时候还没有进行data里的数据监听和事件的初始化 其实大家很多时候都会在created钩子函 ...
- Vue系列之 => 钩子函数生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue生命周期 钩子函数
首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...
- Vue指令的钩子函数使用方法
在Vue 中可以把一系列复杂的操作包装为一个指令. 什么是复杂的操作? 我的理解是:复杂逻辑功能的包装.违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等.我们总是期望以操作数据的形式来实 ...
- vue父子组件钩子函数的执行顺序
加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
随机推荐
- NFS客户端挂载目录后无写入权限的解决方案
转载至:https://blog.csdn.net/younger_china/article/details/52089337 在客户机通过 mount -o rw -t nfs 192.168.1 ...
- JS中浏览器兼容问题
body的子节点IE 火狐 显示3个 其他显示7个 float浮动中的兼容 link 操作外联的兼容
- oralce管理命令
Emctl start agent TZ set to PRC Oracle Enterprise Manager 10g Database Control Release 10.2.0.1.0 Co ...
- POJ3697
/* Memory Time 7096K 2641MS */ #include <iostream> #include <string> using namespace std ...
- 【转载】ubuntu下编写字符设备驱动程序-入门篇
在ubuntu初学驱动,觉得挺有用的. http://www.eefocus.com/jefby1990/blog/13-02/291628_c39b8.html
- 手机端 echarts使用 svg渲染器
// 使用 Canvas 渲染器(默认) var chart = echarts.init(containerDom, null, {renderer: 'canvas'}); // 等价于: var ...
- 2019-10-26-Inno-Setup-安装包脚本-Run-的-Flags-标记
title author date CreateTime categories Inno Setup 安装包脚本 Run 的 Flags 标记 lindexi 2019-10-26 08:42:39 ...
- java返回结果集封装
1.返回消息统一定义文件CodeMsg.java public class CodeMsg { private int retCode; private String message; // 按照模块 ...
- Java Annotation入门
Java Annotation入门作者:cleverpig 版权声明:本文可以自由转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本声明作者:cleverpig(作者的Blog:http:/ ...
- BackgroundWorker 的输入、输出参数、进度条与文字刷新、取消机制、返回事件
1. 定义全局变量 BackgroundWorker backgroundwoker; 2. 点击开始按钮或其它时机初始化 backgroundwoker = new BackgroundWorker ...