我已经使用css构建了一个旋转转盘。转盘是用"ul"标签建造的。当向左/向右导航时,我会在列表的左侧或右侧添加一个"li"(克隆相关值并将其附加/前置)。然后,我正在校正"ul"的左值,并使用动画的css转换来移动"ul"。这用于通过动画实现无休止的导航效果
动画对"下一个"导航效果很好,但对"背面"不起作用。最让我困惑的是,当调试"返回"代码时,动画确实有效!(也许这是一个时间问题,但为什么"下一个"有效??)
这个问题的演示如下:jsfiddle
请注意:这不是我真正的代码。真实的代码被封装在一个面向对象的风格插件中,对用户前后快速点击等情况进行验证,并对使用jQuery"animate"的情况进行polyfill验证。我也考虑过使用现成的插件,但要求不符合我发现的。。。
这个问题让我有些困惑;当在中间(在addClass
调用周围)添加警报时,它似乎起到了一定的作用。这可能与浏览器DOM更新的时间有关,至少对我来说,这是兼容性的一个巨大危险信号。
由于您无论如何都依赖jQuery,因此我建议您使用jQuery动画。代码更小,支持该功能,并且适用于CSS3之前的浏览器。我在你的基础上模拟了一把小提琴,它完全符合你对自己的期望,只是使用.animate()
。
注意,我使用了swing
jQuery宽松;如果您想要更多的宽松类型(如CSS中的ease-in-out
),请尝试jQuery宽松插件。
使用的代码(在.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();
});
});