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-& ...
随机推荐
- ENSP 安装后，启动路由器提示错误41
ENSP 安装后,启动路由器提示错误41 环境: 安装的软件清单: VirtualBox-5.2.28-130011-Win.exe WinPcap_4_1_3.exe Wireshark-x64-3 ...
- Vue. 之 npm安装Element
Vue. 之 npm安装Element 前提: 相关运行环境以搭建完成,例如:Node.Npm等. 假如我的项目目录如下: D:\DISK WORKSPACE\VSCODE\CDS\cds-ap ...
- 洛谷P1063 能量项链 [2006NOIP提高组]
P1063 能量项链 题目描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标 记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子 ...
- 使用cnpm真的会有诡异的Bug
前端网页居然会出现堆栈溢出,然后网页崩溃,退出的问题. 出现这个Bug的时候,我非常的怀疑我自己的一些操作能力,比如,git的操作. 毕竟我是本地代码然后拉取远程分支,还会暂存自己的代码,然后暂存区代 ...
- ios开发ARC，IBOutlets之strong与weak
今天在写程序的时候,用IBOutlets连了一个自定义的控件,出现了问题,后面访问的时候,控件里有些subviews没有初始化好,取到的时候为nil, 程序里用了ARC, IBOutlets一连接上, ...
- github中markdown语言的使用规则
开始使用github就接触了markdown,确实如它的宗旨所言"易读易写",语法简洁明了,功能比纯文本更强,是一种非常适用于网络的书写语言.并且一大优点是兼容HTML,只要不在m ...
- python 利用pandas导入数据
- PHPCMS快速建站系列之类别调用及类别显示页面
在需要调用类别的地方,比如列表页,首先写循环前面写上一句: <?php $TYPE = getcache('type_content','commons');?> 这句就是把类别缓存加载进 ...
- docker push dial tcp *.*.*.*:443 getsockopt: connection refused
docker 在提交镜像的时候出现以下错误. 我用的是本地的仓库,所以tcp后面是我的ip地址. 错误信息: #docker push ubuntu docker push dial tcp 192 ...
- Android 神兵利器之通过解析网页获取到的API数据合集，可拿来就用
AppApis 前段时间,写了个做app的实战系列教程,其中一篇章提到了解析网页中的数据为己所用,看到大家的响应还不错,于是把自己以前解析过的网页数据都整理了下,开放出来,给更多的人使用,希望可以帮助 ...