javascript - 为什么requestAnimationFrame中变更属性值能使transition产生过渡效果？

问题描述

问 题

1. requestAnimationFrame内部设置的属性值，与外部设置的属性值有什么区别？

2. 效果

a.产生过渡效果。(虽然这里requestAnimationFrame应该也属于浏览器定时器触发线程)(但是，requestAnimationFrame不应该是紧接下次layout前，设置吗？然后200px也应该把50px覆盖了啊？被渲染的元素直接是200px => transition没的过渡？？但竟然有过渡效果)

                menu.style.display = 'block';
                menu.style.height = '50px';

                requestAnimationFrame(function (time_stamp) {
                    menu.style.transitionDuration = '1.4s';
                    menu.style.height = '200px';
                });

b.产生过渡效果(读menu.offsetHeight，先强制layout一次成50px，这个可以理解)

                menu.style.display = 'block';
                menu.style.height = '50px';

                console.log(menu.offsetHeight);//50;

                    menu.style.transitionDuration = '1.4s';
                    menu.style.height = '200px';

c.不产生过渡效果(浏览器lazy，style.height值被覆盖，可以理解)

                menu.style.display = 'block';
                menu.style.height = '50px';

                    menu.style.transitionDuration = '1.4s';
                    menu.style.height = '200px';

3. Demo

解决方案

应该是间隔了两帧,相当于

requestAnimationFrame(function (time_stamp) {
                    menu.style.display = 'block';
                    menu.style.height = '50px';
                    //动画效果，底部/右部 移动
                    menu.style.transitionDuration = '0s';
                    console.log('start', Date.now());
                    console.log('start-stamp', time_stamp);
                    // // console.log(menu.offsetHeight);//50;
                    requestAnimationFrame(function (time_stamp) {
                        console.log('raf', Date.now());
                        console.log('raf-stamp', time_stamp);
                        menu.style.transitionDuration = '1.4s';
                        menu.style.height = '200px';
                        // console.log(menu.offsetHeight);//50;
                        // correctLocation(menu, e);
                    });
                    ...
});                    

Demo

这篇关于javascript - 为什么requestAnimationFrame中变更属性值能使transition产生过渡效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！