我想使用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
<div id="content"></div> <a id="add-element" href="#">add new element</a>
JS
$('#add-element').click(function() {
var newElement = $('<div class="new">new element</div>');
$('#content').append(newElement);
newElement.removeClass('new');
});
当我单击链接时，将创建新的元素。它的类是“new”(背景颜色为黄色)，并附加到HTML标记。我应该能够立即删除“新”类，以触发背景颜色过渡到透明(或任何其他颜色)。我显然做错了，因为新元素的背景颜色立即显示为透明，没有过渡效果。
我知道我可以在JQuery UI中做到这一点，但我想使用CSS3过渡。
jsfiddle这里：
解决方法
我能够得到这个工作与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 = $('<div class="highlight">new element</div>');
$('#content').append(newElement);
});
我在IE 10，Chrome，Safari和最新的FF测试，并在那里工作。可能不工作在IE 9及以下…
http://jsfiddle.net/nprather/WKSrV/3/
我在Safari Books Online上的这本书中得到了这个方法：
http://bit.ly/11iVv4M
