我在 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)。
谢谢!
最佳答案
您的动画正在运行，只是从头到尾的 push 弄乱了效果。理想的方法是等到过渡结束后再推送元素。由于我们实际上无法访问您的实际代码，因此很难给出合适的解决方案，理想的解决方案是添加一个 transitionend 监听器，然后添加 push。但是很快，您可以在右滑功能中尝试这个，您会看到需要做什么:
firstChamp = champs[0];
champs.shift();
setTimeout(function(){champs.push(firstChamp)},100);
关于javascript - 通过键盘的 slider 动画不起作用(javascript 和 CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30790164/