css转换不起作用

我已经建立了一个使用css的旋转木马。转盘由'ul'标签构建。当左/右导航时，我会在列表的左侧或右侧添加一个'li'（克隆相关值并附加/预先设定）。然后，我正在修正'ul'的左边值，并使用动画的css转换移动'ul'。这用于通过动画实现无尽的导航效果。
该动画非常适合'下一个'导航，但无法在'后面'上工作。对我来说最令人困惑的部分是，当调试“后退”代码时，动画确实起作用！（也许这是一个时间的问题，但是，为什么“下一个”工程???）的问题css转换不起作用

的演示是在这里：jsfiddle

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

来源

2012-10-07 Yaniv Efraim

我假定它以某种方式相关的定时。将settimeout添加到动画时，问题消失。有任何想法吗？看[示例]（http://jsfiddle.net/efraimya/wBm2R/12/） –

这个问题让我有些困惑;当在中间添加警报（围绕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(); 
    }); 
});

来源

2012-10-07 06:27:33 Eric

谢谢。我有一个确切的代码作为老式浏览器的polyfill。问题在于，jQuery animate和css3转换之间存在巨大的性能差异。在这两种方法之间切换时，您实际上可以看到差异。请参考[this]（http://stackoverflow.com/questions/10984771/whats-faster-css3-transitions-or-jquery-animations） –

@Yaniv由于jQuery 1.8，这是微不足道的（他们重新设计了动画代码1.8）。此外，该博客上的测试显示同时动画1,849项* *。但是，如果你仍然如此担心，可以使用[this插件]（http://ricostacruz.com/jquery.transit/），它使用jQuery为你自动化CSS3转换。 – Eric

css转换不起作用

回答

相关问题