javascript - 我怎样才能确保这个 CSS 过渡动画

Question

我有一个使用 knockout 和 jquery 构建的图像轮播。要为幻灯片制作动画，我真的想使用 CSS 转换而不是 jquery animate。我几乎可以正常工作，但是我有一个问题。在下面的代码中，“slideRight”部分不起作用，但其他部分工作正常。正在发生的事情是跳过到 margin-left 0 的过渡，即使已经添加了过渡类。

if (slideRight) {
    $(requestedElement).insertBefore(currentElement);
    slideContainer.css('margin-left', -$(self.carousel).width());
    slideContainer.addClass('transition');
    slideContainer.css('margin-left', 0);
} else {
    $(requestedElement).insertAfter(currentElement);
    slideContainer.addClass('transition');
    slideContainer.css('margin-left', -$(self.carousel).width());
}

我在这里创建了一个 JSFiddle:http://jsfiddle.net/vnw57nx0/2/

正如您将在 fiddle 中看到的那样，轮播在从右到左的幻灯片之间很好地过渡。

但是如果你在 javascript 中找到这一行:

self.setIndex(self.currentIndex() + 1);

并将其更改为:

self.setIndex(self.currentIndex() - 1);

幻灯片应该反向循环。他们这样做，但他们不是动画。有趣的是，如果我调试脚本并逐步执行它，它就可以正常工作。这让我觉得这是一个时间问题，也许我需要使用回调函数，但 jquery .insertBefore、.css 和 .addClass 都是同步的。

有什么想法可以修复这段代码，如果我调试它就可以工作，但如果我不调试就不能工作？

Answer 1

当您在同一上下文中还原样式值时，浏览器似乎没有进行转换。您需要在新的上下文中使用 setTimeout 之类的东西来执行此操作:

if (slideRight) {
    $(requestedElement).insertBefore(currentElement);
    slideContainer.css('margin-left', -$(self.carousel).width());
    setTimeout(function() {
        slideContainer.addClass('transition');
        slideContainer.css('margin-left', 0);
    });
} else {

http://jsfiddle.net/vnw57nx0/3/

我发现这个问题是因为 Knockout 标签，虽然你的问题中有 Knockout 引用，但问题与 Knockout 无关。事实上，您的代码非常反对 Knockout，因为您在“ View 模型”中使用 jQuery 选择器，并在不需要甚至有用的地方使用可观察对象。