vue在实现过渡动画遇到的问题
vue在实现过渡动画遇到的问题本文只分享在用vue的过渡类名做过渡效果时遇到的一些问题.不再过多介绍具体实现方法.了解vue的过渡动画详情请看vue官网过渡&动画.了解贝塞尔函数请点击这里. 效果预览请点击这里.或扫描下方二维码开始写的代码结构如下,发现并不能触发动画,而是直接显示最终效果,既没有过渡时间,也没有过渡路线.new Vue({el: '#examp...
·
vue在实现过渡动画遇到的问题
本文只分享在用vue的过渡类名做过渡效果时遇到的一些问题.不再过多介绍具体实现方法.
了解vue的过渡动画详情请看vue官网过渡&动画.
了解贝塞尔函数请点击这里.
效果预览请点击这里.或扫描下方二维码
开始写的代码结构如下,发现并不能触发动画,而是直接显示最终效果,既没有过渡时间,也没有过渡路线.
new Vue({
el: '#example',
data: {
},
methods: {
beforeEnter: function(el){
...
},
enter: function(el,done){
this.$nextTick( () => {
...
// 监听动画,结束动画,否则动画无法结束
el.addEventListener('transitionend', done);
})
},
afterEnter: function(){
...
}
}
})
于是就开始了搜索之路,原来在动画开始之前要触发重排重绘.
触发dom重排的操作
- 页面的初次渲染
- DOM树的结构变化,包括添加、删除dom元素
- 获取某些属性,包括offsetTop、offsetLeft、 offsetWidth、offsetHeight、
scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、
getComputedStyle(),获取时应当做适当的缓存 - 改变元素位置(未脱离文档流的情况下)
- DOM元素的几何属性变化(高度,宽度,padding,margin等)
- 元素内容改变
- 调整缩放,触发resize
3中列举的属性需要返回最新的布局信息,因此浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值,所以也会发生重排.
在enter中加入了触发浏览器重排和重绘的代码,动画效果果然实现了.
new Vue({
el: '#example',
data: {
},
methods: {
beforeEnter: function(el){
...
},
enter: function(el,done){
// 触发重排重绘
let elOH = el.offsetHeight;
this.$nextTick( () => {
...
// 监听动画,结束动画,否则动画无法结束
el.addEventListener('transitionend', done);
})
},
afterEnter: function(){
...
}
}
})
更多推荐
已为社区贡献10条内容
所有评论(0)