CSS3 Transition突出显示在JQuery中创建的新元素

我想使用CSS3颜色过渡将高亮淡化效果（黄色到透明）应用于使用JQuery附加到标记的新元素。

CSS

#content div { background-color:transparent; -moz-transition:background-color 2s; -webkit-transition:background-color 2s; -o-transition:background-color 2s; transition:background-color 2s; } #content div.new { background-color:yellow; } 

HTML

 
 add new element 

JS

 $('#add-element').click(function() { var newElement = $('
new element
'); $('#content').append(newElement); newElement.removeClass('new'); }); 

单击链接时，将创建新元素。 它的类是“新”（背景颜色为黄色），它附加到HTML标记。 我应该能够立即删除“新”类以触发背景颜色过渡到透明（或任何其他颜色）。 我显然做错了，因为新元素的背景颜色立即显示为透明，没有过渡效果。 我知道我可以在JQuery UI中执行此操作，但我想使用CSS3过渡。

jsfiddle在这里：

http://jsfiddle.net/paulaner/fvv5q/

Answer 1

我能够使用css3动画：

 @-webkit-keyframes yellow-fade { 0% {background: yellow;} 100% {background: none;} } @keyframes yellow-fade { 0% {background: yellow;} 100% {background: none;} } .highlight { -webkit-animation: yellow-fade 2s ease-in 1; animation: yellow-fade 2s ease-in 1; } 

只需将突出显示类应用于新元素：

 $('#add-element').click(function() { var newElement = $('
new element
'); $('#content').append(newElement); }); 

我在IE 10，Chrome，Safari和最新的FF测试过，它在那里工作。 可能无法在IE 9及以下版本中运行…

http://jsfiddle.net/nprather/WKSrV/3/

我从Safari Books Online的这本书中得到了这个方法： http ： //my.safaribooksonline.com/9780132366847/ch05lev1sec2?link=f1184788-851e-4eb6-bb0b- 61cb0fb7756d&cid= shareLink

Answer 2

你的代码几乎是完美的。 你只需触发一些东西就可以使转换工作。 这可以通过在脚本中添加一行代码来完成。

 $('#add-element').click(function() { var newElement = $('
new element
'); $('#content').append(newElement); // trigger on focus on newly created div newElement.focus(); newElement.removeClass('new'); }); 

http://jsfiddle.net/UXfqd/

Answer 3

这是一个丑陋的黑客，但它似乎工作。 我相信有更好的方法。

 $('#add-element').click(function() { var newElement = $('
new element
'); $('#content').append(newElement); setTimeout(function(){ newElement.removeClass('new'); },0); }); 

http://jsfiddle.net/fvv5q/22/