javascript - 通过键盘的滑块动画不起作用(JavaScript和CSS)

我建立在JS的滑块（具有角）+ CSS其中用户应通过键盘（左箭头和右箭头）来控制。正如您在下面看到的，我将其简化了。

我的代码以这种方式工作：当用户单击鼠标右键时，它将在数组的开头添加一个对象，并删除最后一个对象。当我单击左键时，情况正好相反。

slideEffect = function(dir) {
    if (dir == 'left') {
        lastChamp = champs[champs.length-1];
        champs.unshift(lastChamp);
        champs.pop();

    } else {
        firstChamp = champs[0];
        champs.push(firstChamp);
        champs.shift();

    }
}

事情是。当用户按下“向左箭头”时，它可以正常工作，但是一旦用户按下向右，它就会出错，如您在以下位置看到的：http://brunoornelas.com.br/test/pfc/

有没有人知道如何以最简单的方式并使用Javascript解决问题？ （我不能使用jQuery）。

谢谢！

最佳答案

你的动画工作，它只是在push从第一个到最后一个混乱的效果。理想的办法是要等到过渡两端推元素之前。由于我们实际上无法访问您的实际代码，因此提供适当的解决方案有点困难，理想的解决方案是添加transitionend侦听器，然后添加push。但很快，你可以在你的幻灯片右功能试试这个，你会看到需要做什么：

firstChamp = champs[0];
champs.shift();
setTimeout(function(){champs.push(firstChamp)},100);