通过添加带有Jquery的类来解决CSS3过渡问题

Question

目前我有一个小提琴,我试图让css3不透明度过渡到我添加一个类时触发.基本设置是我单击一个按钮,然后通过jquery我在dom中添加一个div,然后我将该元素添加到dom中,然后向其添加一个类.新dom元素的添加类假设开始我的过渡,但事实并非如此,唯一发生的事情是元素正在显示但不透明度过渡不起作用.任何帮助将非常感激,我留下链接到这里的小提琴链接.并且是的我知道我可以用jquery做淡入,但这只是一个实验,可能会用来启动其他CSS过渡到其他不透明度

Answer 1

我之前遇到过这个问题,我发现的唯一解决方法是添加一个setTimeout让DOM注意到有一个新元素.它可以是零毫秒,它仍然可以工作:

$('button').live('click', function() {
    $(this).after("<div class='fade'>This is just a test</div>")
    setTimeout(function(){$(".fade").addClass("in");}, 0)
});

http://jsfiddle.net/tfmFx/

Answer 2

我认为动态创建的元素尚不支持 CSS3 过渡。我尝试通过div直接将其放入 HTML 中来修改您的示例，并且转换工作正常。在浏览器支持得到改善之前，您可能不得不接受这种解决方法。