Question

我有一个圆圈，由12个弧段组成，我想让用户看到从开始模式到结束模式的过渡。（会有很多开始和结束模式）。

我已将过渡属性包含在css文件中，因此这不是问题。

到目前为止，这是我的代码：

function playAnimations(){
console.log("gets inside playanimations")
var totalLength = document.getElementsByClassName("container")[0].children.length
console.log(totalLength)
for(var i = 0; i < totalLength; i++){
    var current_pattern = document.getElementsByClassName("container")[0].children[i]
        for(var j = 0; j < 12; j++){
            $('#LED' + (j+1) ).css('transition-duration', '0s');
            $('#LED' + (j+1) ).css({fill: current_pattern.children[1].children[j].style.backgroundColor});

        }

        for(var k = 0; k < 12; k++){
            $('#LED' + (k+1) ).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms");
            $('#LED' + (k+1) ).css({fill: current_pattern.children[2].children[k].style.backgroundColor});

        }    

}
}

外部for循环遍历所有模式，而内部两个for循环遍历该特定模式的起始值和结束值。我遇到的问题是我只看到圆圈上的最终颜色，而不是起始颜色。

有没有人知道一个好的解决方法或我可以做些什么来纠正这个问题？任何反馈或帮助表示赞赏。

Answer 1

为您的元素提供transition-delay值。当然每个人都有不同的，比如

#LED1 {
    transition-delay: 0.1s;
}

#LED2 {
    transition-delay: 0.2s;
}

...

#LED2 {
    transition-delay: 1.2s;
}

应该这样做。你应该能够直接在 CSS 中设置transition-duration，我认为不需要JavaScript。

有2个内部for循环有特殊原因吗？两个人都不应该这样做吗？

Answer 2

检查您需要定义的转换属性
```
transition-property*
transition-duration*
transition-timing-function
transition-delay 
```
如果使用js循环设置转换延迟可以帮助您连接转换。
检查您的功能是否正在获取并设置正确的值（快速检查chrome＆＃s; dev控制台会对您有所帮助）
您确定要通过容器作为类获取元素吗？由于它是div的通用名称，因此您可能会在函数中获得一些不需要的元素。我建议将课程更改为另一个不常见的名称。
为什么要两个循环？我想第一个用于在实际转换之前重置颜色，因为你定义transition-duration:0s;第二个是实际转换？
我在每个循环中看到的问题是你将css设置为两行（用;分隔）。试试$('#LED' + (k+1) ).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms").css({fill: current_pattern.children[2].children[k].style.backgroundColor});。

也许可以将填充更改为背景颜色

$('#LED' + (k+1) ).css('transition-duration', "" + current_pattern.children[3].children[0].value + "ms").css('background-color', current_pattern.children[2].children[k].style.backgroundColor);

您可以在W3C找到有关转场的所有文档！

javascript / css中的连续动画

2 个答案: