单击按钮暂停并运行嵌套第n个子级的CSS动画

Question

我有一个正在工作的css动画。我的意思是循环通过每个孩子用keyframes改变背景颜色。

我正在尝试创建一个按钮来暂停并在单击时运行动画。到目前为止，我所拥有的只适用于父母。我只能运行并暂停父对象。我不能让它为嵌套的第n个孩子工作。

我试过document.querySelector('.animation1 animation1:nth-child(16n +1) animation1:nth-child(16n + 2))'、document.querySelectorAll()，但都没用。

我也尝试过document.getElementsByClassName('animation1').classList.add("animation-run");。

var button = document.getElementById('button-ani');
var test_ani = document.getElementsByClassName('animation1');
button.onclick = function() {
test_ani[0].classList.toggle('playani');
}

/*document.getElementsByClassName('animation1').classList.add("animation-run"); */

.animation1 {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
}
/* animation-run
.animation-run {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay);
}

*/

/* Without Paused

.animation1 {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay);
}

*/
.playani {
animation-play-state: running;
}

.animation1:hover {
animation: none;
fill: #666;
}

.animation1:nth-child(16n + 1) {
--animation-delay: 0.2s;
}
.animation1:nth-child(16n + 2) {
--animation-delay: 0.3s;
}
.animation1:nth-child(16n + 3) {
--animation-delay: 0.4s;
}
.animation1:nth-child(16n + 4) {
--animation-delay: 0.5s;
}
.animation1:nth-child(16n + 5) {
--animation-delay: 0.5s;
}

@keyframes ani_keyframes {
0% {
fill: #000;
}
40% {
fill: #FF0;
}
80% {
fill: #330;
}
}

<div id="animation1_wrapper">
<button id="button-ani">Toggle Animation Play State</button>
<svg id="animation1" width="100%" height="100%" viewBox="0 0 418 255" fill="none" xmlns="http://www.w3.org/2000/svg">

<g id="ani_graphic">
<path class="animation1" d="M263.46 25.3801C257.63 29.2001 252.88 33.7801 249.33 37.8001H263.46V25.3801Z" fill="#000"></path>
<path class="animation1" d="M301.26 37.8001V18.8701C300.92 18.7801 300.58 18.6801 300.24 18.6001C287.1 15.3201 275.8 18.2901 266.73 23.3901V37.8001H301.26Z" fill="#f1f1f1"></path>
<path class="animation1" d="M329.15 37.8001C324.38 30.2101 316.5 23.6801 304.54 19.8201V37.8001H329.15Z" fill="#f1f1f1"></path>
----
----
</g>
</svg>
</div>

Answer 1

当你点击播放时，你可以简单地使用forEach循环和querySelectorAll方法在所有classes上做动画，或者当你再次click时，animation将在所有svg元素上停止

querySelectorAll方法返回在DOM树中找到的同一类的节点列表，使用forEach我们可以遍历所有节点列表，并将toggle类应用于类名为的已找到元素

实时工作演示：

var button = document.getElementById('button-ani');
var test_ani = document.querySelectorAll('.animation1');
button.onclick = function() {
test_ani.forEach(function(ani) {
ani.classList.toggle('playani');
})
}

.animation1 {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
}

/* animation-run
.animation-run {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay);
}

*/
/* Without Paused

.animation1 {
--animation-delay: 0.1s;
animation: ani_keyframes 1.8s linear infinite var(--animation-delay);
}

*/
.playani {
animation-play-state: running;
}
.animation1:hover {
animation: none;
fill: #666;
}
.animation1:nth-child(16n + 1) {
--animation-delay: 0.2s;
}
.animation1:nth-child(16n + 2) {
--animation-delay: 0.3s;
}
.animation1:nth-child(16n + 3) {
--animation-delay: 0.4s;
}
.animation1:nth-child(16n + 4) {
--animation-delay: 0.5s;
}
.animation1:nth-child(16n + 5) {
--animation-delay: 0.5s;
}
@keyframes ani_keyframes {
0% {
fill: #000;
}
40% {
fill: #FF0;
}
80% {
fill: #330;
}
}

<div id="animation1_wrapper">
<button id="button-ani">Toggle Animation Play State</button>
<svg id="animation1" width="100%" height="100%" viewBox="0 0 418 255" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="ani_graphic">
<path class="animation1" d="M263.46 25.3801C257.63 29.2001 252.88 33.7801 249.33 37.8001H263.46V25.3801Z" fill="#000"></path>
<path class="animation1" d="M301.26 37.8001V18.8701C300.92 18.7801 300.58 18.6801 300.24 18.6001C287.1 15.3201 275.8 18.2901 266.73 23.3901V37.8001H301.26Z" fill="#f1f1f1"></path>
<path class="animation1" d="M329.15 37.8001C324.38 30.2101 316.5 23.6801 304.54 19.8201V37.8001H329.15Z" fill="#f1f1f1"></path>
----
----
</g>
</svg>
</div>