Question

我想使用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');
});

单击链接时，将创建新元素。它的类是“新”（背景颜色为黄色），它附加到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 = $('<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://my.safaribooksonline.com/9780132366847/ch05lev1sec2?link=f1184788-851e-4eb6-bb0b-61cb0fb7756d&cid=shareLink

Answer 2

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

$('#add-element').click(function() {
    var newElement = $('<div class="new">new element</div>');
    $('#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 = $('<div class="new">new element</div>');
    $('#content').append(newElement);
    setTimeout(function(){
        newElement.removeClass('new');
    },0);
});

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

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

3 个答案: