CSS3 - DOM删除过渡

使用keyframes，可以在元素插入到DOM后立即对其进行动画制作。下面是一些示例CSS：CSS3 - DOM删除过渡

@-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; 
}

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

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

来源

2011-08-09 Steve

创建名为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中没有办法做到这一点。

来源

2011-08-09 18:54:13 mercator

这是很聪明的，但如果我要去一个JavaScript路线我可以调用'$（'＃填写“）。淡出（）'。我真正想要的只是一个CSS解决方案 - 我不知道在一个元素中淡出是否可能，直到我查看了很多论坛，所以我希望有人知道如何淡化一个元素。 – Steve

但'.fadeOut（）'使用JavaScript来完成动画。这实际上使用动画的CSS。它只是使用JavaScript在正确的时间触发它。而且，由于您正在使用JavaScript来实际插入/移除元素，因此“仅限CSS”是一种随意性。没有办法在CSS被删除之前触发某些事情。如果您将这些“点击我”div变成链接，您可以使用'.hide：active +＃fill'作为触发淡出的选择器，但是您仍然需要一个'animationend'事件来实际当元素淡出时删除元素。 – mercator

@ S.K .:总之，没有。 CSS与添加和删除元素等DOM操作无关。 FadeIn技巧的工作原理是，只要元素第一次出现就会发生动画，因为这是可能发生的第一个时刻。为了让一个元素知道FadeOut，它需要知道它将要被移除，并且这只能通过Javascript来实现。正如mercator所说，由于您已经在使用Javascript来移除元素，因此“仅限CSS”的要求是任意的。 – joequincy

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

在删除任何组件/ dom节点时，添加一个叫'去除'的类。

然后在CSS，你使用这个类可以定义动画：

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

而且早在JavaScript中，添加了“删除”级刚过，你应该能够检查的“动画'css属性，如果它存在，那么你知道你可以勾选'animationEnd'，如果不存在，那么就马上删除该元素。我记得在一段时间后测试它，它应该工作;我会看看我是否可以挖掘示例代码。

更新： 我已经挖了这个技术，并开始写jQuery的一个非常酷的插件，允许你使用CSS3动画对于那些被删除的DOM元素。没有额外的Javascript要求：http://www.github.com/arthur5005/jquery.motionnotion

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

来源

2012-07-31 22:56:59

非常有趣。当你添加对append（）和prepend（）等其他函数的支持时，我会开始使用它。它与https://github.com/ai/transition-events相比如何？ –

嗨史蒂夫，这主要是为了其他人，我已经更新了插件以支持append（）和prepend（）。 :) –

-4

理想的东西像淡入淡出和你应该使用CSS过渡不是CSS动画..

来源

2012-10-17 10:31:48

动画工作在DOM插入，转换不 –

CSS3 - DOM删除过渡

回答

相关问题