更新

Question

我尝试使用JavaScript创建滑动轮播。当你想要回到幻灯片时，一切都有效。在下面的示例中，如果您选择了“第二个”，那么请点击“第一个”，然后点击“动画”并直接进入“第一个＆＃39;” 39 ;.当我检查dev工具时，我看到实际的CSS动画就在那里（即CSS transition）。

我认为问题是，它会跳过第19行的代码：

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

并应用第25行的那个：

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

我希望它转到translateX(-50%)然后动画到translateX(0)。我怎样才能做到这一点？

如果您有更好，更有效的方式来创建滑动旋转木马，请发布。

CodePen

＆＃13;

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;
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

更新

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

过时的CodePen

Answer 1

修改

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

我想我修好了它，但transition: bezier使行为怪异但有点酷（从未见过这样的滑块）。不管怎样，它确实在Chrome和Firefox PC中正常运行。 功能但不完全稳定;如果快速连续点击＆＃34;箭头：它会以不同于预期的不同幻灯片结束。我责怪过渡时的马车故障，所以试着调整一下去快一点。以下是我改变的部分。我认为问题来自于flex-wrap: nowrap未声明#sliderInnerWrapper。

#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。在change或unfocus之前，事件blur不会执行任何操作。我猜Firefox会根据规范处理change而Chrome会变得有点流氓并说，＃34;搞砸了！我知道你真正想做的事情＆＃34;无论如何，在Chrome和Firefox PC中测试确定。

删除css动画无效

CodePen

更新

1 个答案:

修改