我如何确保这个CSS过渡动画
我有一个使用knockout＆jquery构建的图像传送带。 要制作幻灯片的动画，我真的想使用CSS转换，而不是jquery动画。 我有这个接近工作，但我有一个问题。 在下面的代码中，'slideRight'部分不起作用，但其他部分正常工作。 发生了什么是向边缘的过渡 - 即使已经添加了过渡类，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都是同步的。
任何想法如何我可以解决这个代码的工作，如果我调试，但不，如果我不？
当你在相同的上下文中还原样式值时，浏览器似乎不会进行转换。 你需要在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，因为你在你的“视图模型”中使用了jQuery选择器，并且在没有任何需要或甚至有用的情况下使用observable。
链接地址: http://www.djcxy.com/p/84235.html