添加过渡效果

Question

我想在滑块上添加翻译效果，但是我不知道如何添加翻译效果。 请告诉我怎么做

我想要当我单击右键时从左到右显示新幻灯片，所以当我单击左键时从右到左显示新幻灯片！

如果可能的话，请帮助纠正我的代码，谢谢！

 var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex - 1].style.display = "block"; } 

 * { box-sizing: border-box } .slideshow-container { max-width: 100%; height: 470px; position: relative; margin: auto; background: #fff; padding: 5px 10px 0px 0px; } .mySlides { display: none; text-align: center; } .prev, .next { cursor: pointer; position: absolute; top: 50% width: auto; color: #14b8c2; font-size: 18px; } .next { right: 0; border-radius: 0 3px 3px 0; } .prev { left: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover {} 

 <div class="slideshow-container"> <div class="mySlides"> html element1 </div> <div class="mySlides"> html element2 </div> <button class="prev" onclick="plusSlides(-1)">left</button> <button class="next" onclick="plusSlides(1)">right</button> </div> 

Answer 1

您需要更改JS代码，以了解单击的是左按钮还是右按钮，然后为您添加一个动画，如下所示：

.next{
    position: absolute;
    left: 0;
    width: 200px;
    height: 200px;
    animation: slidel 3s forwards;
}
@keyframes slidel {
    100% { left: 100%;}
}

这将使类.next的div从左向右滑动。 现在，您需要做的就是在从右到左的动画中添加另一个动画，并在单击相应按钮时添加它

Answer 2

可以将Transition CSS属性与Transform属性结合使用来为滑块设置动画。

例如：过渡：翻译1s缓入；

在此，只要更改该元素上的translation属性，浏览器就会为过渡设置动画1秒钟。

我已经如下编辑您的代码。 我使用了translateX而不是display因为display不能与transition一起使用。

另外，我传递的是向左或向右按​​下按钮。

<button class="prev" onclick="plusSlides(-1,'left')">left</button>

offsetWidth给出元素的宽度，在CSS中设置为140px。 我已经使用了它，所以如果我们在CSS中进行更新，则无需更新JS内的宽度。

Javascript：

  function showSlides(n, direction) {
    var i;
    var slides = document.querySelectorAll('.mySlides');

    if (n >= slides.length)
      slideIndex = 0;

    if (n < 0)
      slideIndex = slides.length - 1;

        var negTranslateX = 'translateX(-' + slides[i].offsetWidth + 'px)';
    var posTranslateX = 'translateX(-' + slides[i].offsetWidth + 'px)';

    for(i = 0; i < slides.length; i++) {
      // Slide to be in view
        if(i === slideIndex) {
        slides[i].style.zIndex = 1;
        slides[i].style.transform = 'translateX(0)';
      } else { // other slides, which has to be hidden
        slides[i].style.zIndex = -i;

        // negative translate pushes element to the left and positive to the right.
        if(direction === 'right') {
          if(i <= slideIndex)
            slides[i].style.transform = negTranslateX;

          if(i > slideIndex)
            slides[i].style.transform = posTranslateX;
        } else if(direction === 'left') {
          if(i <= slideIndex)
            slides[i].style.transform = posTranslateX;

          if(i > slideIndex)
            slides[i].style.transform = negTranslateX;
        } 
      }
    }
  }

CSS：

.slideshow-container {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  height: 40px;
  width: 140px;
}

.mySlides {
  background: #20c997;
  box-sizing: border-box;
  padding: 10px 20px;
  position: absolute;
  transition: transform 1s ease-out;
  width: 140px;
}

请注意，外部和内部.mySlides的宽度都必须相同。

检查此Codepen示例： https ://codepen.io/anon/pen/KRMNaR