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 ...
随机推荐
- mybatis缓存问题导致无法查询到数据
今天查询记录时,发现重复查询结果时出现空记录的情况 查看控制台信息,只有红色框选部分有进行查询数据,而其他没有.然而上图可看出有两条数据是能展现出来的,故有可能是mybatis缓存命中的. 因此在ma ...
- hive命令
1.库命令:show databases; 查看所有库名select current_database(); 显示当前数据库:describe database publish; 查看某个库信息use ...
- 编程思想（POP,OOP,SOA,AOP）
1)POP--面向过程编程(Process-oriented programming ): 面向过程编程是以功能为中心来进行思考和组织的一种编程方法,它强调的是系统的数据被加工和处理的过程,在程序设计 ...
- Thingsboard源码安装部署
交流QQ群 如果安装有其他问题,可以到QQ群求助 环境安装 开发环境要求:Jdk 1.8版本Postgresql 9以上Node.jsNpmMaven 3.6以上Git工具Idea开发工具 JDK 下 ...
- 《自拍教程29》Sublime_小脚本编写首选
Sublime Sublime 是一个轻量.简洁.高效.跨平台的编辑器, 最新的是Sublime Text 3. Sublime对Python支持非常好,如果只是简单的编写批处理脚本编写, 或者小范围 ...
- Python requests 调Jenkins登录后的接口，返回403Fobidden的原因及解决方法。
因Jenkins启用“防止跨站点请求伪造" 解决方法: 在Manage Jenkins->Configure Global Security 设置中将“防止跨站点请求伪造”取消勾选
- 阿里Java架构师分享自己的成长经历，教你如何快速成长为架构师
架构师是公司的“金领”,很少需要考虑生存的问题,从而有更多的精力思考关键技术,形成“强者愈强”的良性循环.当然,冰冻三尺非一日之寒,成为一名合格的架构师是一个漫长的积累过程.对于大部分的软件开发人员来 ...
- Python中的用open打开文件错误，FileNotFoundError: [Errno 2] No such file or directory:
学习python的文件处理,刚开始打开文件,代码如下 f = open('test_file.txt', 'r', encoding='UTF-8')RES = f.readlines()print( ...
- java读取中文文本文件乱码问题
今天遇到的问题是这样:用java读取一个中文文本文件,但读取到的却是乱码,之前一直没有问题,查清楚后,原来是因为今天是用的windows的记事本来编辑的文件,因编码方式是的不同而导致了乱码,解决方法就 ...
- 小白的linux笔记3：对外联通——开通ssh和ftp和smb共享
1.SSH的开通.https://www.cnblogs.com/DiDiao-Liang/articles/8283686.html 安装:yum install sshd或yum install ...