Javascript 删除css动画不工作

我正在尝试使用JavaScript创建一个滑动旋转木马。除此之外，当你想返回幻灯片时，一切都正常。在下面的例子中，如果你在“第二”，然后单击“第一”，没有动画，它会直接转到“第一”。当我签入开发工具时，我看到了实际的CSS动画（即CSS

transition

）

我认为问题在于，它跳过了第19行的代码：

sliderInnerWrapper.style.transform = 'translateX(-50%)';

并应用第25行中的：

sliderInnerWrapper.style.transform = 'translateX(' + translateXamount + '%)';

我希望它转到

translateX（-50%）

然后设置动画到

translateX（0）

。我怎样才能做到这一点

如果你有一个更好，更有效的方法来创建一个滑动旋转木马，请张贴

var sliderInnerWrapper=document.getElementById（'sliderInnerWrapper'），
sliders=document.getElementsByCassName（'slider'），
arrows=document.getElementsByClassName（'arrows'），
currentSelectedTabContent=滑块[0]，
previousSelectedTabContent=当前SelectedTabContent；
上一个SelectedTabContent.style.display='block'；
var tabChange=函数（选项卡）{
var selectedIndex=indexInClass（箭头，选项卡路径[0]），
翻译量；
currentSelectedTabContent=滑块[selectedIndex]；
currentSelectedTabContent.style.display='block'；
如果（已选择索引

#滑块外包装器{
宽度：300px；
/*溢出：隐藏的；额外的*/
}
#滑块式包装器{
显示器：flex；
调整项目：灵活启动；
宽度：600px；
}
.滑块{
宽度：300px；
高度：150像素；
显示：无；
}
.箭头{
显示：内联块；
}

弗斯特
第二
第三
第四

编辑

我想我已经修好了，但是

转换：bezier

让这个行为很奇怪，但有点酷（从来没有见过滑块有这样的行为）。无论如何，这一次，它在Chrome和Firefox PC上肯定能正常工作。功能性但不完全稳定；如果“箭头：如果连续快速单击，它将出现在与预期不同的幻灯片上。我把这归咎于过渡期的时间，所以试着调整一下，加快速度。以下是我更改的部分。我认为问题在于没有在

#sliderinerwrapper

上声明

flex-wrap:nowrap

#sliderOuterWrapper {
  width: 300px;
 overflow: hidden; 
}

#sliderInnerWrapper {

 display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 600px;

}

currentSelectedTabContent.style.display = "block";
//currentSelectedTabContent.style.visibility = "visible";
if (selectedIndex < indexInClass(sliders, previousSelectedTabContent)) {
  translateXamount = -100;
  sliderInnerWrapper.style.transform = 'translateX(-50%)';
} else {
  translateXamount = -50;
}

#滑块外包装器{
宽度：300px；
溢出：隐藏；
}
#滑块式包装器{
显示器：flex；
flex-flow：行nowrap；
调整内容：灵活启动；
宽度：600px；
}
currentSelectedTabContent.style.display=“块”；
//currentSelectedTabContent.style.visibility=“可见”；
如果（已选择索引

---

我将事件

change

更改为

click

。事件

change

在您

unfocus

或

blur

之前不会执行任何操作。我猜Firefox按照规范处理

更改

，Chrome有点胡闹，说，“去他妈的！我知道你真正想做什么”，在Chrome和Firefox PC上测试过。ok。

tab.path[0]

：

TypeError:tab.path未定义

你使用的浏览器是什么？我用的是chrome浏览器，它运行得很好。不知道Chrome在做什么，但

选项卡

是事件对象，我认为事件没有

路径

属性。我制作了一个

控制台。记录选项卡的日志

，这里有一个快照：如果你有更好的方法获得单击的单选按钮，请告诉我刚刚更新了代码笔。现在让我知道它是否对你有效。谢谢你的回答，但问题仍然存在。问题是，当选择“第二个”时，则选择“第一个”，没有动画，并且

translateX

在没有动画的情况下变为0。请特别注意这一部分：如果动画元素在转换完全完成之前变为display:none，则事件也不会触发。元素在回调函数中获得

display:none

。在任何动画出现之前，它会变成

display:block

。@Jessica检查一下，它的行为实际上是稳定的，因为它会去你想去的地方，但是动画是这样的，而且顺序很奇怪，滑动是对

translateAmount=-100

的响应，而不是对

slidennerWrapper.style.transform='translateX的响应（-50%）；

我希望它先变为-50%，然后动画变为0。我认为这是一个常规滑块的配方，这就是我正在尝试创建的。