vue在实现过渡动画遇到的问题

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重排的操作

1. 页面的初次渲染
2. DOM树的结构变化，包括添加、删除dom元素
3. 获取某些属性，包括offsetTop、offsetLeft、 offsetWidth、offsetHeight、
   scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、
   getComputedStyle()，获取时应当做适当的缓存
4. 改变元素位置（未脱离文档流的情况下）
5. DOM元素的几何属性变化（高度，宽度，padding，margin等）
6. 元素内容改变
7. 调整缩放，触发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(){
            ...
        }
    }
})