Question

我有一个执行transform3d动画的javascript循环。一切都很好，但我想看看我是否可以在循环内的某些执行中添加延迟（总共4项）。

for (i=0,len=$clientsSections.length;i<len;i++) {
    clientsSection = $clientsSections[i];

    if (i == 0 || i == 3) {
        finalTransitionTime = '600ms';
    }
    else if (i == 1 || i == 2) {
        finalTransitionTime = '300ms';
    }

    clientsSection.style.webkitTransition = 'all ' + finalTransitionTime + ' linear';
    clientsSection.style.OTransition = 'all ' + finalTransitionTime + ' linear';
    clientsSection.style.msTransition = 'all ' + finalTransitionTime + ' linear';
    clientsSection.style.MozTransition = 'all ' + finalTransitionTime + ' linear';
    clientsSection.style.transition = 'all ' + finalTransitionTime + ' linear';

    clientsSection.style.webkitTransform = 'translate3d(0,0,0)';
    clientsSection.style.transform = 'translate3d(0,0,0)';
    clientsSection.style.OTransform = 'translate3d(0,0,0)';
    clientsSection.style.msTransform = 'translate3d(0,0,0)';
    clientsSection.style.MozTransform = 'translate3d(0,0,0)';
}

我想要做的是立即运行i == 0和i == 3，但延迟i == 1和i == 2几百毫秒。我试图弄清楚如何实现这一点，但我正在努力使用for循环运行0,1,2,3来实现它。

Answer 1

CSS3有一个转换延迟属性，可能就是你想要的。

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

例如：transition-delay: 200ms;

过渡属性也支持延迟。

http://css-tricks.com/almanac/properties/t/transition/

Ex：transition: color 300ms 200ms;（延迟200ms，然后运行动画300ms）

延迟transform3d但不循环

1 个答案: