html - CSS不能淡出再隐藏

Question

我正在尝试制作一个 css 类和动画，这将使 div(及其内容)淡出或移动，但最终，div 将具有 display:none 和 可见性:隐藏

我的努力没有奏效!我可以让它变得生动，或者看起来像是被“移除”了

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

.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 中注释掉了隐藏部分(尽管不透明度使其隐藏)。

是否可以在不使用 JavaScript 的情况下应用淡出，然后更新 visibility 和 display？

Answer 1

添加 animation-fill-mode: forwards; 以便您正在设置动画的元素停留在最后一个(键)帧，并且不会重新开始或刷新到开头。

了解更多关于 animation-fill-mode 的信息.

另一种写这个动画的方法:

.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;
    }
}