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％的价值：

像这样使用它：

animation: infrontAnimation 1s 2s ease-out;

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

Answer 1

我没有设置元素的高度或宽度，而是找到了一种不同的方法，对我来说，并不像强迫高度达到99.9％那样狡猾。这就是我想出的：

首先，而不是使用display隐藏＆amp;显示它，我使用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中实际上不会“消失”直到不透明度完成。

详细工作示例：FIDDLE DEMO

我希望这有助于其他观众

Answer 2

所有的拳头，我已经创建了一个Fiddle来展示可以做些什么。红色条表示其他内容，如文本。比如说，如果你想以它首先消失的方式隐藏它，然后收缩，你可以使用

@-webkit-keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

@keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

animation: infrontAnimation 1s 2s forwards ease-out; -webkit-animation: infrontAnimation 1s 2s forwards ease-out;

请注意，@keyframes同为@-webkit-keyframes。如果你需要隐藏它而不缩小动画，你可能想要使用这个

@-webkit-keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  99.9% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

@keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  99.9% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

Answer 3

您需要将animation-fill-mode:设置为值forwards，以便它在动画的最后一帧结束。

请参阅：http://dev.w3.org/csswg/css-animations/#animation-fill-mode

使用css3动画显示？如何在动画期间/之后隐藏/取消隐藏元素？

3 个答案: