31

我想使用 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/

4

3 回答 3

35

我能够让它与 css3 动画一起使用。只需将highlight类应用于新元素：

$('#add-element').click(function() {
  $('<div class="highlight">new element</div>').appendTo('#content');
});
@keyframes yellow-fade {
  0% {
    background: yellow;
  }
  100% {
    background: none;
  }
}

.highlight {
  animation: yellow-fade 2s ease-in 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="add-element">Add element</button>
<div id="content"></div>

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

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

于 2013-06-01T21:23:27.403 回答
23

您的代码几乎是完美的。你只需要触发一些东西才能使过渡工作。这可以通过在脚本中添加 1 行代码来完成。

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

于 2012-10-10T08:21:17.223 回答
4

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

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

于 2012-10-10T08:11:44.507 回答