CSS无法淡出然后隐藏

Question

我正在尝试制作一个css类和动画,它将使div(和它的内容)淡出或移动,但最终,div display:none和visibility:hidden

我的努力没有奏效!我可以让它成为动画,或者似乎被"删除"

这个粗略的例子证明了这个问题

.hide {

    animation-name:fadeOut;
    animation-duration:1s;
    /*visibility: hidden;
    display: none;*/
}

@keyframes fadeOut {
    from {
        opacity: 1;
        margin-left: 0%;
    }

    to {
        opacity: 0;
        margin-left: -100%;
    }
}

<div class="hide">
    <div style="padding:20px;background:orange;">
        <div style="padding:5px;background:azure;">
            My content
        </div>
     </div>
</div>

我也尝试过更新CSS

to {
    opacity: 0;
    margin-left: -100%;
    visibility: hidden;
    display: none;
}

以及 https://jsfiddle.net/

正如您所看到的,在CSS中我已经注释掉了隐藏部分(尽管不透明度使其隐藏).

是否可以应用淡出然后更新visibility和display不使用JavaScript？

Answer 1

添加animation-fill-mode: forwards;以便您动画的元素保留在最后(键)帧上,并且它不会重新开始或刷新到开头.

了解有关动画填充模式的更多信息.

编写此动画的另一种方法:

.hide {
  animation: fadeOut 1s forwards;
}

.hide {
    animation-name:fadeOut;
    animation-duration:1s;
    animation-fill-mode: forwards; /* added */
    /*visibility: hidden;
    display: none;*/
}

@keyframes fadeOut {
    from {
        opacity: 1;
        margin-left: 0%;
    }

    to {
        opacity: 0;
        margin-left: -100%;
        height: 0; /* added */
    }
}

<div class="hide">
  <div style="padding:20px;background:orange;">
    <div style="padding:5px;background:azure;">
      My content
    </div>
  </div>
</div>

   <div>
 Other content
   </div>

滚动条修复

滚动条问题的一个可能解决方案是将隐藏元素带回初始位置margin: 0;(或者无论初始边距是什么):

@keyframes fadeOut {
    0% {
        opacity: 1;
        margin-left: 0%;
    }

    99% {
        opacity: 0;
        margin-left: -100%;
        height: 0;
    }
    100% {
        opacity: 0;
        margin-left: 0; /* added */
        height: 0;
    }
}