CSS3 过渡以突出显示在 JQuery 中创建的新元素

Posted 2023-03-06

【中文标题】CSS3 过渡以突出显示在 JQuery 中创建的新元素

【英文标题】：CSS3 Transition to highlight new elements created in JQuery

【发布时间】：2012-09-30 15:28:49

【问题描述】：

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

【参考方案1】：

我能够让它与 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/

【讨论】：

这要好得多，并且不需要在 javascript 方面摆弄。

【参考方案2】：

您的代码几乎是完美的。你只需要触发一些东西才能使过渡工作。这可以通过在脚本中添加 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/

【讨论】：

干净简单。我知道需要某种事件触发来使转换工作。

经过 3 小时的尝试，感谢您的帮助 :) 关于为什么必须集中注意力的任何解释？

@JacobValenta 我再也找不到 w3c 规范了。基本上它需要某种triggering 事件/状态，例如:active、:checked、:hover 等才能使转换正常工作。想象一下，您有 100 个应用了过渡效果的元素，没有某种 trigger，所有这些元素都将在页面加载后立即进行动画处理。这就是为什么您需要在特定事件/状态下 triggering 动画的原因。

谢谢！现在这是有道理的。干杯

这是我在整个谷歌中找到的最佳答案，值得标记为正确

【参考方案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/

【讨论】：

谢谢。它在 Chrome 上运行，但在 Firefox 上似乎不稳定且不稳定。

@Paulaner Andy 得到了正确答案，这就是我正在考虑的问题。使用 1000 而不是 0 可能会更好，因为您确实想看到过渡，0 只会闪烁颜色并消失。顺便说一句，我看不到 FF15 的过渡，而是纯黄色，还不支持？ @Andy，我不认为这是hack。在这种特殊情况下，它应该以这种方式工作，因为 jQuery 在追加后立即执行 removeClass，这就是为什么看不到转换应该的原因。

谢谢你们。 Rezigned 刚刚发布了一个非常适合我的干净解决方案。

@user1643156 是的，css 转换仅在元素可见时才有效。所以这里有点违反直觉，因为他甚至在额外的一行中做了 removeclass，而不是把它链接到 append。