Question

我试图创建一个css类和动画，它会使div（和它的内容）淡出或移动，但最终，div有display:none和{{ 1}}

我的努力没有奏效！我可以将其设置为动画，或者显示为＆＃34;已删除＆＃34;

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

＆＃13;

visibility:hidden

＆＃13;

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

＆＃13;

我也尝试过将CSS更新为

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

还有https://jsfiddle.net/

正如您所看到的，在CSS中我已经注释掉了隐藏部分（虽然不透明度使其隐藏）。

是否可以应用淡出效果，然后在不使用JavaScript的情况下更新to { opacity: 0; margin-left: -100%; visibility: hidden; display: none; }和visibility？

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

CSS无法淡出，然后隐藏

1 个答案:

滚动条修复