正如这个问题所观察到的，新添加的元素上的CSS过渡立即被忽略了-过渡的结束状态立即被呈现。

例如，给定此CSS（此处省略前缀）：

.box { 
  opacity: 0;
  transition: all 2s;
  background-color: red;
  height: 100px;
  width: 100px;
}

.box.in { opacity: 1; }

此元素的不透明度将立即设置为1：

// Does not animate
var $a = $('<div>')
    .addClass('box a')
    .appendTo('#wrapper');
$a.addClass('in');

我已经看到了触发过渡以获得预期行为的几种方法：

// Does animate
var $b = $('<div>')
    .addClass('box b')
    .appendTo('#wrapper');

setTimeout(function() {
    $('.b').addClass('in');
},0);

// Does animate
var $c = $('<div>')
    .addClass('box c')
    .appendTo('#wrapper');

$c[0]. offsetWidth = $c[0].offsetWidth
$c.addClass('in');

// Does animate
var $d = $('<div>')
    .addClass('box d')
    .appendTo('#wrapper');
$d.focus().addClass('in');

相同的方法适用于原始JS DOM操作-这不是jQuery特定的行为。

编辑-我正在使用Chrome 35。

• 为什么忽略附加元素上的即时CSS动画？
• 这些方法如何以及为什么起作用？
• 还有其他方法吗
• 哪个是首选解决方案？