css animate的@keyframes可以改变dislplay属性吗？

Question

有两个问题，我想不出解决办法。 示例：https://jsfiddle.net/uL3fktrh/

问题1. css中启用display:none of #a后，animate会失败。

问题 2. 我想每次进入 .bt 时都重新启动 animate，因此我编写了以下语法来删除并重新加载，但不再使用 animate。

$(".bt").mouseenter(function() {
  $("#a").removeClass("cd-fade-in");
  $("#a").addClass("cd-fade-in");
});

如果animate无法更改显示属性，我该怎么做才能获得相同的效果？

Answer 1

正如您所注意到的，

display

属性不可设置动画。但是 

visibility

 属性 

is，您可以通过设置 visibility: hidden;

 而不是 

display: none; 以类似的方式使用它

使用这种方法需要注意两件重要的事情：

由于
1. visibility

    属性的可用值是离散的，因此在对其进行动画处理时，值将在中间点发生变化。例如：

@keyframes becomeHidden {
    0% { visibility: visible; }
  100% { visibility: hidden; }
}

使用该动画，元素实际上会在 50% 标记处从

visible

 切换到 

hidden

。

我通常克服这个问题的方法是通过这种方法：

@keyframes becomeHidden {
    0% { visibility: visible; }
  100% { visibility: visible; }
  100% { visibility: hidden; }
}

这将强制元素在动画持续时间内保持可见，但在最后变得隐藏。

通过
2. visibility: visible;

    隐藏的元素仍然在标记中保留其空间。这是与 

   display: none;

    的一个重要区别，后者也会从布局中删除元素。因此，如果您使用 

   visibility

    隐藏某个元素，您可能还需要执行其他操作（例如使其使用 

   position: absolute;

    或折叠其宽度或高度）以使其完全消失。

---

您可能还有兴趣了解将来如何有效地转换 CSS 中的

display

 属性：

在显示之间进行转换：无即将推出的 CSS 功能（视频）

添加语法来为新元素上的 css 转换建立更改前样式。

Answer 2

是修改版；看看插图吧：

$(".bt").mouseenter(function() {
  $("#a").fadeIn(500);
  $("#a").css('display', 'visible')
});

$(".bt").mouseleave(function() {
  $("#a").fadeOut(500);
  $("#a").css('display', 'visible')
});

#a {
  padding: 2em;
  width: 10em;
  height: 1em;
  background: #333;
  display: none;
}

.cd-fade-in {
  animation: cd-fade-in-1 2s;
  animation-fill-mode: forwards;
  
}

@keyframes cd-fade-in-1 {
  0% {
    display: block;
    height: 1em;
  }
  100% {
    display: block;
    height: 10em;
  }
}

/*-------------------*/
.bt{
  width:4em;
  background: blue;
  margin-bottom:2em;
  color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bt">碰觸我
</div>
<div id="a">
</div>

Answer 3

只是想指出动画离散属性现在终于可以工作了！您可以通过指定

transition-behavior: allow-discrete

 和 

@starting-style

 来实现此目的。

今年已将其添加到CSS中，您可以查看文档

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior。

我还在我的简短博客文章中写了有关此功能和其他最近的 CSS 功能的文章，您可以在这里阅读：

https://blog.meetbrackets.com/css-today-powerful-features-you-might-not-know-about -39adbbd5c65b

Answer 4

display 属性是一个离散属性，因此对它们进行动画处理并没有多大意义。

相反，您通常想要的动画是使用不透明度使元素淡入淡出，或者将高度/宽度动画化为 0，或者通过动画其位置将它们滑出视图，或者它们的组合。

动画完成后，您可以使用

display: none

 删除元素。这只需要告诉浏览器它不需要尝试渲染该元素或其子元素。除非您有很多未显示的元素并且必须节省一些资源，否则您可能不需要实际尝试切换此属性。