CSS3 - DOM删除过渡

Question

使用关键帧,可以在元素插入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

创建另一个名为的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');
        });
    }
});

另请参阅我的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

这是非常实验性的,使用风险自负,但会喜欢一些帮助和反馈.:)