Question

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

问题的演示在这里：jsfiddle

请注意：这不是我的真实代码。真正的代码包含在面向对象的插件中，对用户快速点击前进和后退等情况进行验证，并使用jQuery“animate”进行polyfill。我也考虑过使用现成的插件，但要求不符合我发现的那些......

Answer 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();
    });
});

css转换不起作用

1 个答案: