通过使用Jquery添加类来触发CSS3过渡 [英] Trigering a CSS3 Transition with adding a class with Jquery

问题描述

目前我有一个正在运行的小提琴，我试图得到一个css3不透明转换，当我添加一个类时，它关闭。基本设置是，我单击一个按钮，然后通过jquery我添加一个div到dom，我将该元素添加到dom之后，然后添加一个类。添加类到新的dom元素是假设启动我的转换，但不是，发生的唯一的事情是，该元素正在显示，但不透明转换不工作。任何帮助将非常感激，我离开链接到fiddle
在这里小提琴链接。和是的，我知道我可以做淡入淡出只是jquery，但这只是一个实验，可能会用于启动其他css过渡，而不透明

At the moment I have a running fiddle that I am trying to get a css3 opacity transition to fire off when I add a class to it. The basic set up is that I click a button and then through jquery I add a div to the dom and after I add that element to the dom I then add a class to it. The adding class to that new dom element is suppose to kick off my transition but it is not, the only thing that is happening is that the element is being showed but the opacity transition isnt working. Any help will be much appreciated, I am leaving a link to the fiddle here fiddle link .And yes I know i could do the fade in with just jquery, but this is just a experiment , that would probably be used to kick off other css transition other then opacity

推荐答案

我遇到这个问题之前，唯一的解决方法，我发现是添加一个setTimeout让DOM通知有一个新的元素。它可以是零毫秒，它仍然可以工作：

I have encountered this problem before, the only workaround I've found is adding a setTimeout to let the DOM notice there's a new element. It can be zero ms and it will still work:

$('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/

这篇关于通过使用Jquery添加类来触发CSS3过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！