我如何确保这个CSS过渡动画

How can I ensure this CSS transition animates

本文关键字：CSS 动画 何确保 确保      更新时间：2023-09-26

我有一个图像旋转木马使用knockout &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都是同步的。

任何想法我可以如何修复这段代码，如果我调试，但不如果我不?

当您在同一上下文中恢复样式值时，浏览器似乎不会进行转换。您需要在新的上下文中使用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选择器在你的"视图模型"和使用可观察对象，没有必要，甚至有用。

相关文章：