CSS CSS3 - DOM 移除的过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7000648/
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
CSS3 - Transition on DOM Removal
提问by Steve
Using keyframes, it is possible to animate an element as soon as it is inserted into the DOM. Here's some sample CSS:
使用关键帧，可以在元素插入 DOM 后立即对其进行动画处理。这是一些示例 CSS：
@-moz-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
#box {
-webkit-animation: fadeIn 500ms;
-moz-animation: fadeIn 500ms;
animation: fadeIn 500ms;
}
Is there some similar functionality available to apply an animation (via CSS, no JavaScript) to an element right before it is removed from the DOM? Below is a jsFiddle I made to play around with this idea; feel free to fork it if you know of a solution.
是否有一些类似的功能可用于在元素从 DOM 中删除之前将动画（通过 CSS，无 JavaScript）应用到元素？下面是我用这个想法制作的 jsFiddle；如果您知道解决方案，请随意分叉。
jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/
jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/
采纳答案by mercator
Create another CSS animation called fadeOut, say. Then when you want to remove the element, change the animationproperty on the element to that new animation, and use the animationendevent to trigger the actual removal of the element once the animation is done:
创建另一个名为 的 CSS 动画fadeOut，比如说。然后，当您想要移除元素时，将元素上的animation属性更改为该新动画，并animationend在动画完成后使用该事件触发元素的实际移除：
$('.hide').click(function() {
if (!$(this).hasClass('disabled')) {
$('#fill').css('-webkit-animation', 'fadeOut 500ms');
$('#fill').bind('webkitAnimationEnd',function(){
$('#fill').remove();
$('.show, .hide').toggleClass('disabled');
});
}
});
See also my updated version of your jsFiddle.That works for me in Safari, at least.
另请参阅我的 jsFiddle 更新版本。这至少在 Safari 中对我有用。
Well, you should be using a class instead of that .css().
好吧，您应该使用 class 而不是 that .css()。
I don't think jQuery has any "real" support for CSS animations yet, so I don't think you can get rid of that webkitAnimationEnd. In Firefox it's just called animationend.
我不认为 jQuery 对 CSS 动画有任何“真正的”支持，所以我认为你不能摆脱它webkitAnimationEnd。在 Firefox 中，它只是被称为animationend.
I'm pretty sure there's no way to do this in just CSS.
我很确定没有办法只用 CSS 来做到这一点。
回答by Arthur Goldsmith
I've been working on a component library for javascript and I ran into this problem myself. I have the benefit of being able to throw a ton of javascript at the problem, but since you're already using a bit, consider the following for a gracefully degrading solution:
我一直在为 javascript 开发一个组件库，我自己也遇到了这个问题。我的好处是能够在问题上抛出大量 javascript，但由于您已经使用了一些，请考虑以下内容以获得优雅的降级解决方案：
On removal of any component/dom node, add a class called 'removing'.
在移除任何组件/dom 节点时，添加一个名为“removing”的类。
Then in the css you can define your animation using that class:
然后在 css 中，您可以使用该类定义动画：
.someElement.removing {
-webkit-animation: fadeOut 500ms;
-moz-animation: fadeOut 500ms;
animation: fadeOut 500ms;
}
And back in the javascript, just after you add the 'removing' class, you should be able to check for the 'animation' css property, and if it exists, then you know that you can hook on 'animationEnd' and if it doesn't, then just remove the element right away. I remember testing this a while back, it should work; I'll see if I can dig up the example code.
回到 javascript，在添加 'removing' 类之后，您应该能够检查 'animation' css 属性，如果它存在，那么您就知道可以挂钩 'animationEnd'，如果没有't，然后立即删除元素。我记得前一段时间测试过，它应该可以工作；我会看看我是否可以挖掘示例代码。
Update:I've dug up this technique and started writing a really cool plugin for jQuery that allows you to use CSS3 animations for DOM elements that are being removed. No additional Javascript required: http://www.github.com/arthur5005/jquery.motionnotion
更新：我已经挖掘了这项技术并开始为 jQuery 编写一个非常酷的插件，它允许您对正在删除的 DOM 元素使用 CSS3 动画。不需要额外的 Javascript：http: //www.github.com/arthur5005/jquery.motionnotion
It's very experimental, use at your own risk, but would love some help and feedback. :)
这是非常实验性的，使用风险自负，但希望得到一些帮助和反馈。:)
回答by Naman Goel
ideally for something like fadeIN and fadeOUT you should be using css transitions not css animations..
理想情况下，对于诸如淡入淡出和淡出之类的东西，您应该使用 css 过渡而不是 css 动画..
