58

使用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/

4

3 回答 3

22

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');
        });
    }
});

另请参阅我的 jsFiddle 更新版本。至少在 Safari 中这对我有用。

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

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

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

于 2011-08-09T18:54:13.667 回答
8

我一直在为 javascript 开发一个组件库，我自己也遇到了这个问题。我的好处是能够在问题上抛出大量的 javascript，但是由于您已经使用了一点，请考虑以下以优雅地降级解决方案：

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

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

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

回到 javascript 中，在添加 'removing' 类之后，你应该能够检查 'animation' css 属性，如果它存在，那么你知道你可以挂钩 'animationEnd' 如果它没有't，然后立即删除该元素。我记得前段时间对此进行了测试，它应该可以工作；我会看看我是否可以挖掘示例代码。

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

这是非常实验性的，使用风险自负，但希望得到一些帮助和反馈。:)

于 2012-07-31T22:56:59.760 回答
-8

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

于 2012-10-17T10:31:48.440 回答