动画在 Display: block to none 上不起作用答案

【问题标题】：Animation doesnot work on Display: block to none动画在 Display: block to none 上不起作用
【发布时间】：2018-03-01 11:16:06
【问题描述】：

我正在尝试显示或隐藏侧面板的标题，同时将其折叠到宽度：50%

我正在使用 display: block to display:none; 不知何故，我无法在上面使用动画

这是我正在使用的代码

.fade-in {
  animation: fade-in 0.5s ease-in-out both;
}
.fade-out {
  animation: fade-out 0.6s ease-in-out both;
}
@keyframes fade-in {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@keyframes fade-out {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: block;
  }
}

知道为什么显示不工作

【问题讨论】：

恐怕display 条件之间的动画是不可能的。实现它的唯一方法是制作另一个在视觉上隐藏元素的动画，而不是在完成时真正隐藏元素。在这种情况下，js 是必需的。如果您需要这样的解决方案，请告诉我。
谢谢@voloshin。我是用打字稿做的。

标签： css animation display ng-animate

【解决方案1】：

.fade-in {
  animation: fade-in 0.5s ease-in-out both;
  background:black;
  height:200px;
  width:200px;
  margin-bottom:10px;
}
.fade-out {
  animation: fade-out 0.6s ease-in-out both;
  background:red;
  height:200px;
  width:200px;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    display: none;
  }
  100% {
    opacity: 0;
  }
}

<div class="fade-in"></div>
<div class="fade-out"></div>

【讨论】：

你可以看到：stackoverflow.com/questions/26607330/…
这根本没有帮助。当 opacity:0 display:none 未被应用时
显示属性不可设置动画。您可以将其从关键帧动画中删除，结果相同。
我在已经有折叠动画的角度模板中使用这个动画。当侧面板折叠时， display: none 不适用于不透明度。如果我不使用不透明度并尝试使其与显示一起使用，那么当我打开侧面板时就会遇到问题。当显示从无更改为阻止时，内容正在跳跃。我希望 display:block 被延迟
它纯粹是有角度的