添加过渡效果

Question

I want add translate effect to my slider but I don't know how to add the translate effect. Please tell me how to do it

I want when i click on right button display new slide from left to right and so when i click on left button display new slade from right to left!

if possible for you,Please help correct my code, Thanks!

 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

You need to change your JS code to know when it is the left button that was clicked or the right one then add you an animation like this :

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

this will slid a div with the class .next from left to right. Now all you need to do is add another animation to the right to left animation, And add it when ever the corresponding button is clicked

Answer 2

The Transition CSS property can be used to animate the slider in combination with Transform property.

Eg: transition: translate 1s ease-in;

Here, whenever the translate property on that element is changed, browser will animate the transition for 1 sec.

I have edited your code as below. I have used translateX instead of display since, display cannot be used with transition .

Also, I am passing in which button was pressed, left or right.

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

offsetWidth gives the width of the element, which here would be 140px which is set in the CSS. I have used this, so we need not update the width inside our JS, if we update in CSS.

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

Note that, the width of both the outer and inner .mySlides needs to be same.

Check this codepen sample: https://codepen.io/anon/pen/KRMNaR