CSS过渡不起作用答案

【问题标题】：css transition doesn't workCSS过渡不起作用
【发布时间】：2012-09-27 19:19:54
【问题描述】：

我已经使用 css 构建了一个旋转轮播。轮播由“ul”标签构成。向左/向右导航时，我在列表的左侧或右侧添加一个“li”（克隆相关值并附加/前置它）。然后我正在纠正“ul”的左值并使用动画的 css 过渡移动“ul”。这用于通过动画实现无尽的导航效果。
该动画非常适合“下一个”导航，但无法在“后退”上工作。对我来说最令人困惑的部分是，在调试“返回”代码时，动画确实有效！（也许是时间问题，但是，为什么“下一个”有效？？？）

问题的演示在这里：jsfiddle

请注意：这不是我的真实代码。真正的代码封装在一个面向对象风格的插件中，对用户快速向前和向后点击等情况进行验证，以及使用 jQuery 'animate' 的 polyfill。我也确实考虑过使用现成的插件，但要求不符合我发现的要求...

【问题讨论】：

我认为它与时间有关。将 settimeout 添加到动画时，问题就消失了。有任何想法吗？见example

标签： jquery css jquery-plugins css-transitions carousel

【解决方案1】：

这个问题让我有些困惑；在中间添加警报时（围绕addClass 调用），它似乎有点工作。这可能与浏览器的 DOM 更新时间有关，至少对我来说，这是一个巨大的兼容性危险信号。

由于您依赖 jQuery无论如何，我建议您改用 jQuery 动画。代码更小，功能受支持，并且可以在 CSS3 之前的浏览器中运行。我已经模拟了 a fiddle, based on yours，它完全符合您对自己的期望，只是使用 .animate() 代替。

请注意，我使用了swing jQuery 缓动；如果您想要更多缓动类型（例如 CSS 中的 ease-in-out），请尝试使用 jQuery easing plugin。

使用的代码（在.prev 按钮上）：

$('.prev').on('click', function() {
    var $childelement = $('ul');
    $childelement.children('li').last().clone().prependTo($childelement);
    $childelement.css({
        'left': '-150px'
    }).animate({ 'left': '-50px' }, 400, "swing", function() {
        console.log('transition ended');
        $childelement.children('li').last().remove();
    });
});

【讨论】：

谢谢。我有确切的代码作为旧浏览器的 polyfill。问题是 jQuery animate 和 css3 转换之间存在巨大的性能差异。在这两种方法之间切换时，您实际上可以看到差异。请参考this
@Yaniv 从 jQuery 1.8 开始，这可以忽略不计（他们在 1.8 中重新设计了动画代码）。此外，该博客上的测试显示同时为 1,849 个项目设置了动画。但是，如果您仍然对此感到担忧，您可以使用 this plugin，它使用 jQuery 为您自动进行 CSS3 转换。