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 ...
随机推荐
- ELK：收集Docker容器日志
简介 之前写过一篇博客 ELK:日志收集分析平台,介绍了在Centos7系统上部署配置使用ELK的方法,随着容器化时代的到来,容器化部署成为一种很方便的部署方式,收集容器日志也成为刚需.本篇文档从 容 ...
- python笔记21（面向对象课程三）
今日内容 嵌套 特殊方法:__init__ type/isinstance/issubclass/super 异常处理 内容回顾 def login(): pass login() class Acc ...
- 威联通（NAS）搭建个人图床
名词解释: 图床:一般是指储存图片的服务器,有国内和国外之分.国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度.国内也分为单线空间.多线空间和cdn加速三种. 更详细的内容,请左转查看百 ...
- Speech Super Resolution Generative Adversarial Network
博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/10874993.html 论文作者:Sefik Emre Eskimez , Kazuhito K ...
- 图像数组运算相关问题（nan/inf）
新年第一更!祝愿新的一年技术长足进步哈! 最近在用sklearn的回归分析模型拟合预测遥感图像,遇到了一些问题,好在一一解决,现在总结一下. 1.首先输入sklearn的数据必须reshape(-1, ...
- Java并发之Exchanger类
应用场景 如果两个线程在运行过程中需要交换彼此的信息,可以使用Exchanger这个类. Exchanger为线程交换信息提供了非常方便的途径,它可以作为两个线程交换对象的同步点,只有当每个线程都在进 ...
- Iptables netstat 防御简单dos攻击
DoS攻击或者DDoS攻击是试图让机器或者网络资源不可用的攻击.这种攻击的攻击目标网站或者服务通常是托管在高防服务器比如银行,信用卡支付网管,甚至根域名服务器,DOS攻击的实施通常迫使目标重启计算机或 ...
- React中的生命周期函数
React的生命周期函数 什么是生命周期函数:生命周期函数是指在某一个时刻组件会自动调用执行的函数 Initialization:初始化 执行Constructor,初始state和props Mou ...
- CAP原理
定义 在一个分布式系统(指系统中的节点互相连接并共享数据)中,当涉及读写操作时,只能保证一致性 (Consistency).可用性 (Availability).分区容错性 (Partition To ...
- JS中this的几种情况
1.给元素的某个事件行为绑定方法,事件触发,方法执行,此时方法中的this一般都是当前元素本身: <div id="div"></div> div.oncl ...