Question

如果我使用display: none;隐藏某个元素，然后稍后使用$(".fa-spin").show()显示该元素，fa-spin动画将无效。

请注意，如果元素未在开头隐藏但稍后会隐藏：

，则一切正常

$(".fa-spin").hide()

这是.fa-spin实施：

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

你能解释一下这种行为吗？

我问的是这种行为的原因，而不是解决方法。

https://jsfiddle.net/md0ej7pt/

Answer 1

您只想要解释一下这种行为？

来自developer.mozilla.org：

除了许多不同的显示框类型之外，值none还可以关闭元素的显示;当您使用none时，所有后代元素的显示都会关闭。 文档的呈现方式就好像文档树中不存在该元素。

与visibility属性相比：

可见性属性可用于隐藏元素，同时留下原本的空间。它还可以隐藏表格的行或列。

Answer 2

试试这个：

$(".fa-cog").css("display","inline-block");

Answer 3

我在这里找到了类似的问题;

CSS transition on an initially hidden elemement

似乎有解决方法;喜欢以z-index: -1代替display:none，或者从元素透明开始。

font-awesome动画无法使用display：none;

3 个答案: