Question

我遇到了CSS过渡的问题，在我尝试别的之前，我想了解问题所在。

容器中有3个盒子和“下一个”按钮。目标是下一个框顶部显示在顶部，并在按下“下一个”按钮时淡入。通过将盒子附加到容器上来将盒子放在顶部，这样它就被添加为最后一个元素，因此可以在顶部看到，并且应该通过css过渡淡入。

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

Fiddle here，代码如下：

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);

更新：

此问题的基本解决方案是在将不透明度设置为0之后和设置转换css之前调用目标上的offset（）：

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

Updated version of the above fiddle here

Answer 1

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

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

在this update to the fiddle我采取了不同的方法。我将转换规则放在“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');

我不知道这是否是“正确”的做事方式。编辑 - 要使其在Chrome中运行，需要使用-webkit-前缀重复“转换”属性。

Answer 2

使用CSS转换是否有任何特殊原因，当您可以使用jQuery淡化而让代码在不支持CSS转换的浏览器上工作时？

var $container = $(".container");

function next() {
    var $next = $container.children().first();
    $next.hide().appendTo($container).fadeIn();
}

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

请注意，您可以通过从容器中取出第一个元素并将其移到后面来避免很多您正在维护的状态 - DOM会为您维护您的状态！

请参阅http://jsfiddle.net/alnitak/w6y3B/

附加元素后，CSS转换不起作用

2 个答案: