Javascript 重新生成网格时仅运行一次CSS动画

Draw_flex（）函数在表单提交时运行，因此每次提交新容器时，动画都会再次运行。如何使它只运行一次？

您可以在函数的开头查找

div.container

元素

draw\u flex

：如果该元素存在，则向“my flex container”添加一个

no animation

类

div.container {

background: url('notebg.png') no-repeat;

height: 250px;

animation-duration: 4s;
animation-name: fadeIn;  
}

而CSS就变成了

function draw_flex() {

   if (document.querySelectorAll('#my-flex div.container').length > 0) {   
       document.getElementById('my-flex').classList.add('no-animation');
   } 
   ...
}

---

因此，在第一次调用

draw\u flex

功能后，动画将被禁用。

hi@AntonSusman，您是否尝试过下面的代码？

function draw_flex() {

   if (document.querySelectorAll('#my-flex div.container').length > 0) {   
       document.getElementById('my-flex').classList.add('no-animation');
   } 
   ...
}

div.container {
   background: url('notebg.png') no-repeat;
   height: 250px;
}

#my-flex:not(.no-animation) div.container {
   animation-duration: 4s;
   animation-name: fadeIn;  
}