Question

我有一个使用knockout＆amp; amp; jQuery的。要为幻灯片设置动画，我真的想要使用CSS过渡而不是jquery动画。我有这个几乎工作，但我有一个问题。在下面的代码中，'slideRight'部分不起作用，但else部分工作正常。正在发生的是转换到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/

正如您在小提琴中看到的那样，旋转木马在从右到左的幻灯片之间很好地过渡。

但是如果你在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，因为你在＆＃34; view model＆＃34;中使用了jQuery选择器。并使用不需要甚至没用的可观察量。

如何确保此CSS过渡动画

1 个答案: