附加元素后 CSS 过渡不起作用

我遇到了 CSS 转换问题，在尝试其他操作之前，我想了解问题所在。

一个容器中有 3 个盒子和一个“下一步”按钮。目标是让下一个框顶部出现在顶部，并在按下“下一个”按钮时淡入。通过将框附加到容器来将其定位在顶部，以便将其添加为最后一个元素，从而在顶部可见，并且应该通过 css 过渡淡入。

问题是附加框后 css 过渡似乎不起作用。 如果在未附加的框元素上进行测试，CSS 过渡效果很好。

在这里摆弄 http://jsfiddle.net/z435s/13/，代码如下：

HTML:

<div class="container">
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box green"></div>
</div>

<div id="next">Next</div>

JS:

var container = $(".container");

// Save the current list order
var list = container.children(".box");
// The current index
var current = 0;

// Put the first on top
container.append(list[0]);

function next() {
    // Figure out what is the index of the next box
    if (current + 1 < list.length) current++;
    else current = 0;

    // Save it in a variable
    var target = $(list[current]);

    // Put it on top
    container.append(target);

    // Hide it and then fade it in
    target.css("opacity", 0).css("transition", "opacity 1000ms ease-out").css("opacity", 1);

    // The fading in is not working
}

$("#next").click(next);

Update:

这个问题的基本解决方案是在将不透明度设置为 0 之后、设置过渡 css 之前在目标上调用 offset() ：

target.css("opacity", 0);
target.offset();
target.css("transition", "opacity 1000ms ease-out").css("opacity", 1);

Updated上面的小提琴版本在这里 http://jsfiddle.net/z435s/14/

“list”变量是一个 jQuery 对象，但作为“目标”从中提取的元素是notjQuery 对象 - 它们是 DOM 节点。因此，您对“.css()”的调用失败（在错误控制台中为我报告）。

一旦解决了这个问题，接下来的问题就是浏览器如何处理一系列 CSS 更新的问题。我不清楚我到底看到了什么（来自 Linux 上的 Firefox 18），但我think基本问题是，由于更改之间没有进行布局重排，因此最终效果是样式“折叠”，因此没有净更改。

In 小提琴的这次更新 http://jsfiddle.net/fUNw2/1/我采取了不同的方法。我将转换规则放在“box”类中，然后添加了一个“prefade”类：

.prefade {
  transition-duration: 0;
  opacity: 0;
}

然后，我不会弄乱元素样式，而是在附加之前添加“prefade”，然后通过询问元素的偏移量来触发布局更新。然后我可以删除“prefade”类，并且该框会淡入。

target.addClass('prefade');
// Put it on top
container.append(target);

var p = target.offset();

target.removeClass('prefade'); 

我不知道这是否是“正确”的做事方式。edit— 要使其在 Chrome 中工作，需要使用以下命令重复“transition”属性-webkit- prefix.