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

Question

我在 JS(带 Angular )+ CSS 中创建一个 slider ，用户应在其中通过键盘(左右箭头)进行控制。正如您在下面看到的那样，我把它简化了。

我的代码是这样工作的:当用户单击右键时，它会在数组的开头添加一个对象并删除最后一个对象。当我向左单击时，结果相反。

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)。

谢谢!

Answer 1

您的动画正在运行，只是从头到尾的 push 弄乱了效果。理想的方法是等到过渡结束后再推送元素。由于我们实际上无法访问您的实际代码，因此很难给出合适的解决方案，理想的解决方案是添加一个 transitionend 监听器，然后添加 push。但是很快，您可以在右滑功能中尝试这个，您会看到需要做什么:

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