javascript - 一个按钮来切换 css 动画暂停 |运行播放状态

Question

我有一个有效的 css 动画。我的图形是 SVG。我一直在尝试添加一个按钮来播放和暂停点击动画，但我似乎无法让它工作。
到目前为止，我所管理的内容如下。

    .animation1 {
        --animation-delay: 0.1s;
        animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
    }
    
    .playani {
        animation-play-state: running;
    }
    
    .animation1:hover {
        animation: none;
        fill: #666;
    }

@keyframes ani_keyframes {
...
...

}

<script type="text/javascript">
    var button = document.getElementById('button-ani'),
        test_ani = document.getElementByClassName('animation1');
    
    button.onclick = function(){
      test_ani.classList.toggle('playani');
    }
  
</script>
  

<div id="animation1_wrapper">

<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>
.....
.....
.....
</g>
</svg>
</div>

 <button id="button-ani">Toggle Animation Play State</button>

Answer 1

因为使用 document.getElementsByClassName('animation1') 会给你 HTMLCollection而 ClassList 适用于元素，因此您可以使用索引器选择元素。然后您的代码完美运行。

var button = document.getElementById('button-ani');

var test_ani = document.getElementsByClassName('animation1');
//this will give you HTML collection object so use [0] to access the element.        
    
    button.onclick = function(){
      test_ani[0].classList.toggle('playani');
      }
  

  .animation1 {
        --animation-delay: 0.1s;
        animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
    }
    
    .playani {
        animation-play-state: running;
    }
    
    .animation1:hover {
        animation: none;
        fill: #666;
    }
    @keyframes ani_keyframes {
  from{
    transform:scale(0);
  }
  to{
    transform:scale(1.1);
  }

}

 <button id="button-ani">Toggle Animation Play State</button>
<div id="animation1_wrapper">

<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>
.....
.....
.....
</g>
</svg>
</div>