CSS-CSS3-DOM Rem上的过渡

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

Steve asked 2020-07-24T01:14:58Z
3个解决方案
17 votes

例如,创建另一个名为webkitAnimationEnd的CSS动画。 然后,当您要删除元素时,将元素上的animationend属性更改为该新动画,并在完成动画后使用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中对我有用。

好吧,您应该使用一个类代替webkitAnimationEnd

我认为jQuery还没有对CSS动画的任何“真正”支持,因此我认为您无法摆脱webkitAnimationEnd的问题。在Firefox中,它仅称为animationend

我敢肯定,仅CSS就无法做到这一点。

mercator answered 2020-07-24T01:15:39Z
6 votes

我一直在为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]

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

Arthur Goldsmith answered 2020-07-24T01:16:22Z
-4 votes

理想情况下,对于诸如fadeIN和fadeOUT之类的东西,应该使用css过渡而不是css动画。

Naman Goel answered 2020-07-24T01:16:43Z
translate from https://stackoverflow.com:/questions/7000648/css3-transition-on-dom-removal