CSS 使用带有 css3 动画的显示？如何在动画期间/之后隐藏/取消隐藏元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24500222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using display with css3 animations? How to hide/unhide elements during/after animations?
提问by Shannon Hochkins
I have a div which I need to animate it's opacity from 1 - 0, and THEN hide it, as some of you may know, adding display properties just override transitional values and hide the element straight away, so I'm wondering if there's a way with css to animate it's opacity, and THEN hide it?
我有一个 div，我需要将它的不透明度从 1 - 0 设置为动画，然后隐藏它，正如你们中的一些人可能知道的那样，添加显示属性只会覆盖过渡值并立即隐藏元素，所以我想知道是否有用 css 动画它的不透明度的方式，然后隐藏它？
Here's what I've tried:
这是我尝试过的：
@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;
}
}
This doesn't work, it just hides straight away, it also doesn't stay at the 100% value:
这不起作用，它会立即隐藏，也不会停留在 100% 值：
Using it like this:
像这样使用它：
animation: infrontAnimation 1s 2s ease-out;
animation: infrontAnimation 1s 2s ease-out;
So my question is, is it possible to hide something, but only after a certain animation is finished?
所以我的问题是，是否可以隐藏某些东西，但只能在某个动画完成后？
回答by Shannon Hochkins
Rather than setting the height or width of an element, I found a different approach, that to me, isn't as dodgy as forcing the height at 99.9%. Here's what I came up with:
我没有设置元素的高度或宽度，而是发现了一种不同的方法，对我来说，它不像将高度强制设置为 99.9% 那样狡猾。这是我想出的：
First, Rather than using displayto hide & show it, I used visibility, seeing as it's still something that can interrupt our animation and ultimately cause it to fail, I setup our transition properties initially:
首先，我没有使用display隐藏和显示它，而是使用visibility，因为它仍然会中断我们的动画并最终导致它失败，所以我最初设置了我们的过渡属性：
Note: I'll keep other prefixes out for this demo:
注意：我将保留此演示的其他前缀：
.item {
transition: visibility 0s linear 0.7s, opacity 0.7s ease-in-out;
}
So what we're doing is setting the transition of the visibility attribute to 0, but delaying it by the time it takes to complete the fade out (opacity);
所以我们正在做的是将可见性属性的过渡设置为 0，但将其延迟到完成淡出（不透明度）所需的时间；
So when we want it to be visible, we add the class of visilble:
因此，当我们希望它可见时，我们添加了 visilble 类：
.item.visible {
transition-delay: 0s;
visibility: visible;
opacity: 1;
}
So we're setting our delay to 0 here so that we can override the state when it transitions in, obviously we dont' want to delay the visibility, we want to set that straight away and then animate our opacity;
所以我们在这里将延迟设置为 0，以便我们可以在它转换时覆盖状态，显然我们不想延迟可见性，我们想立即设置它然后为我们的不透明度设置动画；
Then when we want to hide it:
然后当我们想要隐藏它时：
.item.hidden {
opacity: 0;
visibility:hidden;
}
Then all this is doing is transitioning our opacity back to 0, and leaving our delay at 0.7 so that it doesn't actually 'dissappear' in the dom until the opacity has finished.
然后所做的就是将我们的不透明度转换回 0，并将我们的延迟保留为 0.7，以便它在不透明度完成之前实际上不会在 dom 中“消失”。
回答by Gust van de Wal
Fist of all, I've created a Fiddleto show what can be done. The red bars represent other content, like text. Say, if you want to hide it in a way that it first fades, then shrinks, you could use
首先，我创建了一个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;
animation: infrontAnimation 1s 2s forwards ease-out;
-webkit-animation: infrontAnimation 1s 2s forwards ease-out;
Note that both @keyframesas @-webkit-keyframesare used.
If you need to hide it without shrinking animation, you might want to use this
注意，这两个@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;
}
}
回答by G-Cyrillus
You need to set animation-fill-mode:with the value forwardsso it ends on the last frame of the animation.
您需要animation-fill-mode:使用该值进行设置，forwards使其在动画的最后一帧结束。
See: http://dev.w3.org/csswg/css-animations/#animation-fill-mode
请参阅：http: //dev.w3.org/csswg/css-animations/#animation-fill-mode
