VUE动画Javascript钩子不生效问题记录
举例小球动画如下
<!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>小球动画</title>
<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-show="flag"></div>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false,
},
methods: {
//开始动画之前
beforeEnter(el) {
//起始位置
el.style.transform = 'translate(0,0)'
},
enter(el) {
//动画完成后的样式
el.style.transform = 'translate(150px,450px)'
//动画过渡效果
el.style.transition = 'all 1s ease'
},
afterEnter(el) { }
}
})
</script>
</body> </html>
上面代码动画过渡效果是没有实现的，原因在于浏览器不会根据你js对style的修改实时更新，而一般是在当前js修改完毕之后，会对所有修改统一更新，而display:none(它本身是不能transition的)的状态切换影响了其他过渡效果的切换，毕竟为none的元素没法触发过渡。将offsetWidth打开，你会发现过渡生效了，原因在于取offsetWidth导致浏览器重绘，使后面的style修改前，display确确实实变为了block，从而消除了元素状态为none对过渡的这种影响。添加setTimeout，“打断”js的执行也可生效。
所以可以在enter函数中添加el.offsetWidth或el.offsetHeight
enter(el) {
//也可使用offsetHeight
el.offsetWidth
el.style.transform = 'translate(150px,450px)'
el.style.transition = 'all 1s ease'
}
或者使用setTimeout
enter(el) {
setTimeout(() => {
//动画完成后的样式
el.style.transform = 'translate(150px,450px)'
//动画transition样式
el.style.transition = 'all 1s ease'
}, 20)
},
VUE动画Javascript钩子不生效问题记录的更多相关文章
- Vue 动画的钩子函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 按照vue文档使用JavaScript钩子但是却不能执行动画？
大家刚入VUE肯定是先去阅读文档, 在 进入/离开 & 列表过渡 这一章节有一小节 --------- JavaScript钩子 详情见vue文档: https://cn.vuejs.or ...
- Javascript - Vue - 动画
动画状态类名 vue动画通过将需要执行动画的标签放入transition标签中,再通过设置预置的vue动画类名的css样式来控制动画的呈现效果. 开场动画状态的三个类名 v-enter:动画开始之前的 ...
- Vue动画操作
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- vue动画的用法
vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...
- vue动画及其原理
1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2, 我们以两张 ...
- JavaScript 钩子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...
- JavaScript算法与数据结构知识点记录
JavaScript算法与数据结构知识点记录 zhanweifu
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
随机推荐
- 微信小程序开发技巧总结 （一）-- 数据传递和存储
结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正. 1.短生命周期数据存储 以小程序启动到彻底关闭为周期的的数据建议存储在ap ...
- iptables之路由网关共享上网/端口映射
linux-A 主机配置eth0即可: [root@linux-A ~]# ifconfig eth0|sed -n '2p' inet addr:192.168.20.3 Bcast:192.168 ...
- 关于responseType的值
http请求有个responseType, 用来设置返回值,默认是'',等同于text,数据格式的转换是浏览器处理的 我们还会用到json,buffer,blob json:是我们经常遇到后端返回的数 ...
- CSS中的vertical-align属性
1,vertical-align属性的作用? 设置元素垂直对齐的方式: 2,该属性使用过程的注意点: 与text-align属性不同,text-align属性是设置给需要对齐元素的父元素的, 而ver ...
- redis 5.0.7 源码阅读——字典dict
redis中字典相关的文件为:dict.h与dict.c 与其说是一个字典,道不如说是一个哈希表. 一.数据结构 dictEntry typedef struct dictEntry { void * ...
- Python——模块和包
一.概念 """模块():一个python文件,以 .py 结尾,包含python对象定义和语句.模块可以定义函数.类.变量,也可包含可执行文件 导入模块: 1.impo ...
- 区块链 POS和POW的区别
如果你是一名资深的比特币矿工或商人,你一定听说过POW和POS,否则,很难理解. 读完本文,相信会让你明白,原来,虚拟货币除了挖矿,还有利息! 第一段:通俗的概念解析 POW:全称Proof of W ...
- 【小白视频学Java for循环】3分钟学会Java的for循环，让看懂for循环嵌套再不是难事
目录 一.单个for循环介绍 二.for循环嵌套 听讲时能听懂的for循环为什么一做题就晕菜?一个for循环还勉强能看懂,但为什么一看到双重for循环脑子里就感觉脑子全是浆糊? 如果有上述问题那么就继 ...
- python部署到服务器
python部署到服务器 linux下的CentOS 7 自带python2.7.5, 使用 python --version 命令查看,因系统需要python2.7.5,因此我们并不卸载,另外安装p ...
- 【python基础语法】国庆扩展练习题
''' 一.国庆知识小拓展 1. 用户登陆程序需求: 1. 输入用户名和密码; 2. 判断用户名和密码是否正确? (name='root', password='123') 3. 为了防止暴力破解, ...