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

【问题标题】：Using display with css3 animations? How to hide/unhide elements during/after animations?将显示与 css3 动画一起使用？如何在动画期间/之后隐藏/取消隐藏元素？
【发布时间】：2014-08-21 10:05:40
【问题描述】：

我有一个 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;

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

【问题讨论】：

你能提供一个包含 HTML 的 JSFiddle 吗？
问题：这个动画是交互式的吗，有什么东西可以触发它吗？它会发生不止一次吗？
是的，它是交互式的，一个类会触发它，我确实找到了我的解决方案，但我还不能将其标记为正确答案。请看我的帖子@Michael
不透明度：0->不透明度：0->显示：无；当然你永远看不到它，它从一开始就被隐藏了:)
哎呀，错字@GCyrillus！

标签： css animation sass css-animations

【解决方案1】：

我发现了一种不同的方法，而不是设置元素的高度或宽度，这对我来说并不像将高度强制为 99.9% 那样狡猾。这是我想出的：

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

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

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

所以我们正在做的是将可见性属性的过渡设置为 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

【讨论】：

您的答案看起来不错，但是对于添加隐藏和可见类的简单示例，您的 JSFiddle 过于复杂，为什么要使用大量样式和 jQuery？因此，没有多少人能够效仿你的榜样

【解决方案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;
  }
}

【讨论】：

这很好，但是，我找到了一个不同的解决方案，它不涉及任何对齐或更改高度属性，请参阅我的帖子。
这是使用 CSS 动画淡化或缩小的最佳答案。使用 CSS 过渡淡化很好，但您将希望使用此示例来缩小高度。
如果你隐藏了一些你不想用 ctrl+F 找到的东西，因为元素仍在屏幕上，或者你的任何用户使用辅助技术，因为这不友好。

【解决方案3】：

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

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

【讨论】：