Question

使用keyframes，可以在元素插入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;
}

是否有一些类似的功能可以在从DOM中删除之前将动画（通过CSS，没有JavaScript）应用于元素？下面是我用这个想法玩的jsFiddle;如果您知道解决方案，请随意分叉。

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/

Answer 1

创建另一个名为fadeOut的CSS动画。然后，当您想要删除元素时，将元素上的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.至少在Safari中对我有用。

好吧，你应该使用一个类而不是那个.css()。

我不认为jQuery对CSS动画有任何“真正的”支持，所以我认为你不能摆脱webkitAnimationEnd。在Firefox中，它只是被称为animationend。

我很确定在CSS中没有办法做到这一点。

Answer 2

我一直在研究javascript的组件库，我自己遇到了这个问题。我的好处是可以在这个问题上投入大量的javascript，但由于你已经使用了一点，所以请考虑以下内容以获得优雅降级的解决方案：

删除任何组件/ dom节点后，添加一个名为“remove”的类。

然后在css中你可以使用该类定义你的动画：

.someElement.removing {
    -webkit-animation: fadeOut 500ms;
    -moz-animation: fadeOut 500ms;
    animation: fadeOut 500ms;
}

回到javascript中，在你添加'remove'类之后，你应该能够检查'animation'css属性，如果它存在，那么你知道你可以挂钩'animationEnd'和如果没有，那么只需立即删除元素。我记得一会儿测试它，它应该工作;我会看看我是否可以挖掘示例代码。

<强>更新我已经挖掘出这种技术，并开始为jQuery编写一个非常酷的插件，允许您对正在删除的DOM元素使用CSS3动画。无需其他Javascript：http://www.github.com/arthur5005/jquery.motionnotion

这是非常实验性的，使用风险自负，但会喜欢一些帮助和反馈。：）

Answer 3

理想情况下，对于像fadeIN和fadeOUT这样的东西你应该使用css过渡而不是css动画..

CSS3 - DOM删除过渡

3 个答案: