Html 显示元素在css中激活动画

当元素显示从“无”变为其他值时，其动画（如果有）将激活。 有人知道如何预防吗

另外，了解为什么会发生这种情况也很好。是因为DOM正在被刷新吗

以下是我的意思示例，供参考：

HTML

JS

---

显示时，可以将设置为“暂停”

document.getElementById（'btn'）.addEventListener（“单击”，函数（）{
var currentDisplay=document.querySelector（'.red square'）.style.display；
如果（currentDisplay==“无”）{
document.querySelector（'.red square'）.style.display='inline block'；
document.querySelector（'.red square'）。style.animationPlayState='paused'；
}否则{
document.querySelector（'.red square'）.style.display='none'；
}
})

。红场{
宽度：100px；
高度：100px；
背景色：红色；
显示：内联块；
动画：1s两个移动方块1；
}
@关键帧移动正方形{
0%{
左边距：0px；
}
50%{
左边距：400px；
}
100%{
左边距：0px；
}
}

隐藏和显示广场

当您显示它时，您可以将设置为

暂停

document.getElementById（'btn'）.addEventListener（“单击”，函数（）{
var currentDisplay=document.querySelector（'.red square'）.style.display；
如果（currentDisplay==“无”）{
document.querySelector（'.red square'）.style.display='inline block'；
document.querySelector（'.red square'）。style.animationPlayState='paused'；
}否则{
document.querySelector（'.red square'）.style.display='none'；
}
})

。红场{
宽度：100px；
高度：100px；
背景色：红色；
显示：内联块；
动画：1s两个移动方块1；
}
@关键帧移动正方形{
0%{
左边距：0px；
}
50%{
左边距：400px；
}
100%{
左边距：0px；
}
}

隐藏和显示广场

另一种方法是切换

不透明度

，并在隐藏时将

高度

更改为

0

，这样它就不会占用页面上的任何空间

document.getElementById（'btn'）.addEventListener（“单击”，函数（）{
document.querySelector（'.red square'）.classList.toggle（'hide'）；
})

。红场{
宽度：100px；
高度：100px；
背景色：红色；
显示：内联块；
动画：1s两个移动方块1；
}
@关键帧移动正方形{
0% {
左边距：0px；
}
50% {
左边距：400px；
}
100% {
左边距：0px；
}
}
.隐藏{
不透明度：0；
身高：0；
}

隐藏和显示广场

另一种方法是切换

不透明度

，并在隐藏时将

高度

更改为

0

，这样它就不会占用页面上的任何空间

document.getElementById（'btn'）.addEventListener（“单击”，函数（）{
document.querySelector（'.red square'）.classList.toggle（'hide'）；
})

。红场{
宽度：100px；
高度：100px；
背景色：红色；
显示：内联块；
动画：1s两个移动方块1；
}
@关键帧移动正方形{
0% {
左边距：0px；
}
50% {
左边距：400px；
}
100% {
左边距：0px；
}
}
.隐藏{
不透明度：0；
身高：0；
}

隐藏和显示广场

你的意思是当

display

设置为“inline block”时，你不想触发

moveSquare

动画？你能切换

不透明度/高度吗@是的，就是这样correct@MichaelCoker该解决方案有效，感谢您的意思是当
display
设置为“inline block”时，您不想触发
moveSquare
动画？您可以切换
opacity/height
吗@是的，就是这样correct@MichaelCoker这个解决方案很有效，谢谢
<div class="red-square"></div>
<br/>
<button id="btn">
  Hide and Show square
</button>

.red-square{
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
  animation: 1s both moveSquare 1;
}
@keyframes moveSquare{
  0%{
    margin-left: 0px;
  }
  50%{
    margin-left: 400px;
  }
  100%{
    margin-left: 0px;
  }
}

document.getElementById('btn').addEventListener("click", function() {
  var currentDisplay = document.querySelector('.red-square').style.display;
  if (currentDisplay === 'none') {
    document.querySelector('.red-square').style.display = 'inline-block';
  } else {
    document.querySelector('.red-square').style.display = 'none';
  }
})