css - 将显示与 css3 动画一起使用？如何在动画期间/之后隐藏/取消隐藏元素？

Question

我有一个 div，我需要将它的不透明度设置为 1 - 0 的动画，然后隐藏它，正如你们中的一些人可能知道的那样，添加显示属性只是覆盖过渡值并立即隐藏元素，所以我想知道如果有一种方法可以使用 css 为其不透明度设置动画，然后将其隐藏？

这是我尝试过的:

@keyframes infrontAnimation {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 1;
  }
  50% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  100% {
    display: none;
  }
}

这不起作用，它只是直接隐藏，它也不会保持在 100% 值:

像这样使用它:

动画:infrontAnimation 1s 2s ease-out;

所以我的问题是，有没有可能隐藏一些东西，但只有在某个动画完成之后？

Answer 1

我没有设置元素的高度或宽度，而是找到了一种不同的方法，对我来说，它不像将高度强制设置为 99.9% 那样狡猾。这是我想出的:

首先，我没有使用 display 来隐藏和显示它，而是使用了 visibility，因为它仍然可以打断我们的动画并最终导致它失败，我最初设置了我们的过渡属性:

注意:我会为这个演示保留其他前缀:

.item {        
    transition: visibility 0s linear 0.7s, opacity 0.7s ease-in-out;
}

所以我们所做的是将 visibility 属性的过渡设置为 0，但将其延迟到完成淡出(不透明度)所需的时间；

所以当我们希望它可见时，我们添加visilble这个类:

.item.visible {
    transition-delay: 0s;
    visibility: visible;
    opacity: 1;
}

所以我们在这里将延迟设置为 0，以便我们可以在状态转换时覆盖状态，显然我们不想延迟可见性，我们想直接设置它然后设置不透明度动画；

然后当我们想隐藏它的时候:

.item.hidden {
    opacity: 0; 
    visibility:hidden;
}

然后这一切所做的就是将我们的不透明度转换回 0，并将我们的延迟保留为 0.7，这样它在不透明度完成之前不会真正“消失”在 dom 中。

Detailed Working Example