刪除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上進行了測試。