删除CSS动画无法正常工作

Question

我正在尝试使用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.getElementsByClassName('slider'), arrows = document.getElementsByClassName('arrows'), currentSelectedTabContent = sliders[0], previousSelectedTabContent = currentSelectedTabContent; previousSelectedTabContent.style.display = 'block'; var tabChange = function(tab) { var selectedIndex = indexInClass(arrows, tab.path[0]), translateXamount; currentSelectedTabContent = sliders[selectedIndex]; currentSelectedTabContent.style.display = 'block'; if (selectedIndex < indexInClass(sliders, previousSelectedTabContent)) { translateXamount = 0; sliderInnerWrapper.style.transform = 'translateX(-50%)'; } else { translateXamount = -50 } sliderInnerWrapper.style.transition = 'transform 2.5s cubic-bezier(0.22, 0.61, 0.36, 1)'; sliderInnerWrapper.style.transform = 'translateX(' + translateXamount + '%)'; }, tabContentAnimationCallback = function() { sliderInnerWrapper.style.transition = 'none'; sliderInnerWrapper.style.transform = 'translateX(0)'; previousSelectedTabContent.style.display = 'none'; previousSelectedTabContent = currentSelectedTabContent; }; for (var i = 0; i < arrows.length; i++) { arrows[i].addEventListener('change', function(e) { tabChange(e); }); } sliderInnerWrapper.addEventListener('transitionend', tabContentAnimationCallback); function indexInClass(collection, node) { for (var i = 0; i < collection.length; i++) { if (collection[i] === node) return i; } return -1; } 

 #sliderOuterWrapper { width: 300px; /* overflow: hidden; Enenturally*/ } #sliderInnerWrapper { display: flex; align-items: flex-start; width: 600px; } .slider { width: 300px; height: 150px; display: none; } .arrows { display: inline-block; } 

 <div id="sliderOuterWrapper"> <div id="sliderInnerWrapper"> <div class="slider" style="background-color: green;"></div> <div class="slider" style="background-color: orange;"></div> <div class="slider" style="background-color: purple"></div> <div class="slider" style="background-color: cadetblue"></div> </div> </div> <div id="arrowWrapper"> <input type="radio" name="tabSliderGroup" checked="true" class="arrows" />First <input type="radio" name="tabSliderGroup" class="arrows" />Second <input type="radio" name="tabSliderGroup" class="arrows" />Third <input type="radio" name="tabSliderGroup" class="arrows" />Fourth </div> 

更新资料

我只是意识到，如果第25行仅从第一到第二执行，而不是从第二到第一执行，那么sliderInnerWrapper动画sliderInnerWrapper将为-50％。 如何使它不动画到-50% ？

过时的CodePen

Answer 1

编辑

http://codepen.io/zer00ne/pen/MKrMdr/?editors=0110

我想我已经解决了，但是transition: bezier使行为变得怪异但有点酷（从未见过滑块如此操作）。 无论如何，这次肯定可以在Chrome和Firefox PC中使用。 功能正常但并不完全稳定； 如果快速连续单击“箭头：”，则最终会在与预期不同的幻灯片上结束。我将视线错误归咎于过渡时间，因此请尝试调整得更快一些。以下是我更改了零件。我相信麻烦来自未声明flex-wrap: nowrap #sliderInnerWrapper 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;
}

我将事件change为click 。 在您unfocus或blur之前，事件change不会执行任何操作。 我猜想Firefox change按规范来处理change ，而Chrome有点流氓说：“拧紧它！我知道您真正想做的事。”无论如何，已经在Chrome和Firefox PC上进行了测试。