transitionend 监听transition动画停止 优化性能

问题:

当有动画切换页面的时候

同时切换后的页面会进行大数据量的图表渲染

组合在一起 导致动画卡顿

方案:

监听动画结束在进行图表渲染

 getTransitions() {
            let t;
            for (t in this.transitions) {
                // t即transition,OTransition,MozTransition,WebkitTransition
                if (this.element.style[t] !== undefined) {
                    return this.transitions[t];
                }
            }
 }

listener() {
            //监听动画结束  再进行渲染大数据量的推移图
            //得到动画的元素
            this.element = document.getElementById('calculationResults');
            // 兼容性写法
            this.transitions = {
                // 兼容IE
                'transition': 'transitionend',
                // 兼容Opera
                'OTransition': 'oTransitionEnd',
                // 兼容Firefox
                'MozTransition': 'transitionend',
                // 兼容Google
                'WebkitTransition': 'webkitTransitionEnd'
            };
            // 接收返回的当前浏览器的transition的值
            const setTransitions = this.getTransitions();
            // 添加监听事件
            setTransitions && this.element.addEventListener(setTransitions, () => {
                this.start = true
            }, false)
        },

 

你可能感兴趣的:(前端,css,动画,javascript,css,css3)