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 ...
随机推荐
- JCL、SLF4J、Log4J、Log4J2、LogBack和JUL之间的关系，你搞清楚了吗？
写在前面 日志组件是我们平时开发过程中必然会用到的组件.在系统中正确的打印日志至少有下面的这些好处: 调试:在程序的开发过程中,必然需要我们不断的调试以达到程序能正确执行的状态 .记录日志可以让开发人 ...
- oracle的网络连接
NAMES.DIRECTORY_PATH常用的值有tnsnames,hostname,onames和ezconnect和 ldap,cds,nis不常用的值,默认值是(tnsnames,onames, ...
- meta的作用
一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取ph ...
- 使用java基础实现一个简陋的web服务器软件
使用java基础实现一个简陋的web服务器软件 1.写在前面 大学已经过了一年半了,从接触各种web服务器软件已经有一年多了,从大一上最开始折腾Windows电脑自带的IIS开始,上手了自己的第一个静 ...
- Vue实战之【企业开发常见问题】
1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 问题描述: 遇到动态路由如:/page/:id 从/page/1 切换到 /page/2 发现页面组件没有更新 解 ...
- codewars--js--Two Joggers--求最小公倍数、最大公约数
问题描述: Two Joggers Description Bob and Charles are meeting for their weekly jogging tour. They both s ...
- C# 获取键盘钩子，屏蔽键盘按键
static int hHook = 0; public delegate int HookProc(int nCode, int wParam, IntPtr lParam); //LowLevel ...
- Webpack实战（七）：简单搞懂PostCSS的用法及与一些插件的用法
不知不觉地春节要来临了,今天已经是放假的第二天,想想回老家之后所有的时间就不是自己的了,要陪孩子玩,走亲戚等等,我还是趁着在郑州的这两天,把几天后春节要发布的文章给提前整整.在此,提前祝大家春节快乐! ...
- opencv —— equalizeHist 直方图均衡化实现对比度增强
直方图均匀化简介 从这张未经处理的灰度图可以看出,其灰度集中在非常小的一个范围内.这就导致了图片的强弱对比不强烈. 直方图均衡化的目的,就是把原始的直方图变换为在整个灰度范围(0~255)内均匀分布的 ...
- 邓士鹏【MySql大全】
禁止使用系统关键字: typename 1.计算两个日期的时间差函数 SELECT TIMESTAMPDIFF(MONTH,'2009-10-01','2009-09-01'); interval可是 ...