transform和tiansition

原创于 2017-02-14 17:43:45 发布 · 366 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

42 篇文章

订阅专栏

本文探讨了在使用CSS transition和JavaScript transform时遇到的问题：两者同时执行导致视觉效果不佳。为了解决这个问题，作者建议通过JavaScript的setTimeout函数来延迟transform的执行时间，从而确保transition动画先完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

oLi.style.transition='1s all ease '+200*(N-i)+'ms';

(function(oLi,i){
    setTimeout(function(){
        oLi.style.transform='rotateY('+360/N*i+'deg) translateZ(300px)';
    },0);
})(oLi,i);

当transition和reansform同时写在JS里面是，会同时执行，看不出来运动效果。

需transition先执行。给transform加定时器延时执行以下即可