Html 在 CSS3 动画后隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9991523/
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
Hide div after CSS3 Animation
提问by TonyTakeshi
Would like to know how to hide an div after a set of css3 animation. Here's my code:
想知道如何在一组 css3 动画后隐藏 div。这是我的代码：
#box {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 150px;
background-color: red;
}
#box:hover {
-webkit-animation: scaleme 1s;
}
@-webkit-keyframes scaleme {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(3);
opacity: 0;
display: none;
}
}<div id='box'>
hover me
</div>Here's the jsfiddle sample for better illustration:
这是 jsfiddle 示例以更好地说明：
http://jsfiddle.net/mochatony/Pu5Jf/18/
http://jsfiddle.net/mochatony/Pu5Jf/18/
Any idea how to do hide the box permanently, best without javascript?
知道如何永久隐藏该框，最好不要使用 javascript？
采纳答案by antyrat
Unfortunately there is no best solution using only CSS3. Animations always return to theirs default values (see at Safari Developer Library).
不幸的是，没有仅使用 CSS3 的最佳解决方案。动画总是返回到它们的默认值（参见 Safari 开发者库）。
But you can try to play with -webkit-animation-fill-modeproperty.
但是你可以尝试玩弄-webkit-animation-fill-mode财产。
For example:
例如：
#box:hover{
-webkit-animation:scaleme 1s;
-webkit-animation-fill-mode: forwards;
}
It's at least not immediately return a box to display:block;state.
它至少不会立即返回一个框display:block;状态。
Using JavaScript you can do this by using webkitAnimationEndevent.
使用 JavaScript，您可以通过使用webkitAnimationEnd事件来做到这一点。
For example:
例如：
var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);
Exampleon jsFiddle
jsFiddle示例
回答by Ian Devlin
Change your animation definition to:
将动画定义更改为：
-webkit-animation:scaleme 1s forwards;
This is a value for the animation fill mode. A value of 'forwards' tells the animation to apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed.
这是动画填充模式的值。'forwards' 值告诉动画在动画的最后一次迭代之后应用在其最后一个执行关键帧中定义的属性值，直到动画样式被移除。
Of course in your example the animation style will be removed when the hover is removed. At the moment I can see the need for a small piece of JavaScript to add a class which triggers the animation. Since the class would never be removed (until the page is reloaded) the div would stay hidden.
当然，在您的示例中，当悬停被移除时，动画样式将被移除。目前我可以看到需要一小段 JavaScript 来添加触发动画的类。由于永远不会删除该类（直到重新加载页面），因此 div 将保持隐藏状态。
回答by NicB
Since elements of CSS animations end in their original CSS state, make the original state hidden by scaling it to zero or removing its opacity:
由于 CSS 动画的元素以其原始 CSS 状态结束，通过将其缩放为零或删除其不透明度来隐藏原始状态：
div.container {
transform: scale(0);
-webkit-transform: scale(0);
}
or
或者
div.container {
opacity: 0;
}
Once the animation is completed, the div will go back to its original CSS, which is hidden.
动画完成后，div 将返回其隐藏的原始 CSS。
回答by madr
That can (kind of) be solved without using JavaScript. Since animations use keyframes, what you ask for is possible by setting the duration time to a way too high value, say 1000s, and letting you transition end at a low frame, for example 0.1%.
这可以（有点）在不使用 JavaScript 的情况下解决。由于动画使用关键帧，因此您可以通过将持续时间设置为过高的值（例如 1000 秒）并让过渡以低帧结束（例如 0.1%）来实现。
By doing this, the animation never ends and therefore stay in shape.
通过这样做，动画永远不会结束并因此保持形状。
#box:hover {
-webkit-animation:scaleme 1000s;
}
@-webkit-keyframes scaleme {
0% { -webkit-transform: scale(1); opacity: 1; }
0.1%, 100% { -webkit-transform: scale(3); opacity: 0;display:none; }
}
1000s is not necessary in this particular example though. 10s should be enough for hover effects.
不过，在这个特定示例中，1000s 不是必需的。对于悬停效果，10 秒应该足够了。
It is, however, also possible to skip the animation and use basic transitions instead.
但是，也可以跳过动画并使用基本过渡代替。
#box2:hover {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-moz-transform: scale(3);
-webkit-transform: scale(3);
opacity: 0;
}
I forked your fiddle and altered it, adding the two for comparison: http://jsfiddle.net/madr/Ru8wu/3/
我分叉了你的小提琴并对其进行了修改，添加了两个进行比较：http: //jsfiddle.net/madr/Ru8wu/3/
(I also added -moz-since there is no reason not to. -o-or -ms-might also be of interest).
（我还补充说，-moz-因为没有理由不这样做。-o-或者-ms-也可能感兴趣）。
