html - 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 中，我已将隐藏部分注释掉（尽管不透明度使其隐藏）。

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

标签： htmlcss

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