如何确保CSS过渡动画生效

Question

如何确保CSS过渡动画生效

javascriptjquerycssknockout.jstransition

3

我使用knockout和jquery构建了一个图像旋转木马。为了动画幻灯片，我真的想使用CSS过渡，而不是使用jquery animate。我已经接近实现了这个目标，但是遇到了一个问题。在下面的代码中，“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/ 如您在fiddle中所见，轮播图在幻灯片之间从右到左平滑过渡。

但是，如果您在javascript中找到这行代码：

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

将其翻译为中文：“并将其更改为：”

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

幻灯片应该倒序循环播放。它们确实是这样做的，但它们没有被动画化。有趣的是，如果我调试脚本并逐步执行，它就可以正常工作。这让我想到可能是一个时间问题，也许我需要使用回调函数，但jquery中的.insertBefore、.css和.addClass都是同步的。

你有什么想法如何修复这个代码，如果我不调试它就不能工作？

- Anton

你听说过GreenSock吗？它拥有非常强大的硬件加速动画。 - Marcel

是的，最近我在另一个项目中使用了缓动效果，但在这种情况下，我不想添加另一个库，我想要纯CSS过渡效果。我可能会重构这个项目，以便它也不需要jquery。 - Anton

你的计数器的console.log显示你逐步浏览幻灯片。但是当你改变为-1时，它不起作用。我找不到一行代码，像“如果<0 slidecounter = 5”...也许我错过了。 - TimSPQR

它包含以下内容：如果（requestedIndex < 0）{ requestedIndex = self.slides().length - 1; } else if (requestedIndex >= self.slides().length) { requestedIndex = 0; } - Anton

1

如果您正在使用Chrome浏览器，您可以调试fiddle - 在您想要中断的JavaScript代码处添加“debugger;”（不带引号），并确保您已打开Chrome开发工具（F12）。 - Anton

你尝试过使用http://api.jquery.com/promise/来创建自己的回调函数吗？ - Pricey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Best · Accepted Answer

看起来当您在同一上下文中还原样式值时，浏览器不会进行转换。您需要使用类似于setTimeout的新上下文来执行操作：

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

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

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