动画以下轮播实现的最低限度步骤是什么? [英] What could be the bare minimum steps to animate the following carousel implementation?

问题描述

我正在制作香草js 旋转木马.我已经使用js以及html和css布局了基本的上一个和下一个功能.

现在，我尝试使用css动画(关键帧)来制作左右 slide-in/slide-out 动画，但是代码对我来说却很混乱.因此，我想问的是，在此实现中，要获得相同的动画效果，需要进行哪些最小的更改?

您会选择纯基于JS的还是纯CSS的还是混合的呢?

我的目标是以最少的代码获得合适的动画.

 (function(){让visibleIndex = 0;让carousalImages = document.querySelectorAll(.carousal__image");让totalImages = [... carousalImages] .length;函数makeNextVisible(){visibleIndex ++;如果(visibleIndex> totalImages-1){visibleIndex = 0;}resetVisible();renderVisible();}函数makePrevVisible(){visibleIndex--;如果(visibleIndex< 0){visibleIndex = totalImages-1;}resetVisible();renderVisible();}函数resetVisible(){for(让index = 0; index< totalImages; index ++){carousalImages [index] .className ="carousal__image";}}函数renderVisible(){carousalImages [visibleIndex] .className ="carousal__image--visible";}函数renderCarousel({autoplay = false，autoplayTime = 1000} = {}){如果(自动播放){[... document.querySelectorAll("button")].forEach((btn)=>(btn.style.display ="none"));setInterval(()=> {makeNextVisible();}，autoplayTime);} else renderVisible();}renderCarousel();//在上方添加{autoplay:true}作为参数以自动播放轮播.this.makeNextVisible = makeNextVisible;this.makePrevVisible = makePrevVisible;})();  

  .carousal {显示:flex;align-items:居中;}.carousal__wrapper {宽度:500像素；高度:400px；}.carousal__images {显示:flex;溢出:隐藏；list-style-type:无；填充:0;}.carousal__image--visible {职位:相对}.carousal__image {显示:无；}  

 < div class ='carousal'>< div class ='carousal__left'>< button onclick ='makePrevVisible()'>左</button></div>< section class ='carousal__wrapper'>< ul class ='carousal__images'>< li class ='carousal__image'>< img src ='https://fastly.syfy.com/sites/syfy/files/styles/1200x680/public/2018/03/dragon-ball-super-goku-ultra-instinct-mastered-01.jpg?offset-x = 0& offset-y = 0'alt ='UI Goku'/width ='500'height ='400'/></li>< li class ='carousal__image'>< img src ='https://www.theburnin.com/wp-content/uploads/2019/01/super-broly-3.png'alt ='Broly Legendary'width ='500'height ='400'/></li>< li class ='carousal__image'>< IMG SRC = 'HTTPS://lh3.googleusercontent.com/proxy/xjEVDYoZy8-CTtPZGsQCq2PW7I-1YM5_S5GPrAdlYL2i4SBoZC-zgtg2r3MqH85BubDZuR3AAW4Gp6Ue-B-T2Z1FkKW99SPHwAce5Q_unUpwtm4的' ALT = '贝吉塔基地' 宽度= '500' 的高度= '400'/></li>< li class ='carousal__image'>< img src ='https://am21.mediaite.com/tms/cnt/uploads/2018/09/GohanSS2.jpg'alt ='Gohan SS2'width ='500'height ='400'/></li></ul></section>< div class ='carousal__right'>< button onclick ='makeNextVisible()'>右</button></div></div>  

已更新的代码笔，包含以下答案的反馈和其他一些次要功能= https://codepen.io/lapstjup/pen/RwoRWVe

解决方案

我认为窍门很简单.;)

您不应同时移动一两个图像.相反，您应该一次移动所有图像.

让我们从CSS开始:

  .carousal {职位:相对显示:块；}.carousal__wrapper {宽度:500像素；高度:400px；职位:相对显示:块；溢出:隐藏；边距:0;填充:0;}.carousal__wrapper，.carousal__images {转换:translate3d(0，0，0);}.carousal__images {职位:相对最高:0;左:0；显示:块；左边距:自动；右边距:自动；}.carousal__image {向左飘浮;高度:100％;最低高度:1px；} 

第二步将是计算 .carousal__images 的最大宽度.例如，在您的情况下4 * 500px表示2000px.此值必须作为样式属性 style ="width:2000px" 的一部分添加到您的 carousal__images 中.

第三步将是计算下一个动画点，并使用 transform:translate3d .我们从0开始，想要下一张幻灯片，这意味着我们向左滑动.我们也知道一张幻灯片的宽度.因此结果将是-500px，还必须添加 carousal__images =>的样式属性. style =" width:2000px;转换:translate3d(-500px，0px，0px);"

就是这样.

链接到我的CodePen:具有自动播放功能的基本轮播的Codepen

I am making a vanilla js carousel. I have laid out basic previous and next functionality using js along with html and css.

Now I tried to use css-animations (keyframes) to do left and right slide-in/slide-out animations but the code became messy for me. So here I am asking that what minimal changes would be needed to get the same animation effects in this implementation ?

Will you go for pure JS based or pure CSS based or a mix to do the same ?

My goal is get proper animation with minimal code.

(function () {
  let visibleIndex = 0;
  let carousalImages = document.querySelectorAll(".carousal__image");
  let totalImages = [...carousalImages].length;

  function makeNextVisible() {
    visibleIndex++;
    if (visibleIndex > totalImages - 1) {
      visibleIndex = 0;
    }
    resetVisible();
    renderVisible();
  }
  function makePrevVisible() {
    visibleIndex--;
    if (visibleIndex < 0) {
      visibleIndex = totalImages - 1;
    }
    resetVisible();
    renderVisible();
  }

  function resetVisible() {
    for (let index = 0; index < totalImages; index++) {
      carousalImages[index].className = "carousal__image";
    }
  }
  function renderVisible() {
    carousalImages[visibleIndex].className = "carousal__image--visible";
  }

  function renderCarousel({ autoplay = false, autoplayTime = 1000 } = {}) {
    if (autoplay) {
      [...document.querySelectorAll("button")].forEach(
        (btn) => (btn.style.display = "none")
      );
      setInterval(() => {
        makeNextVisible();
      }, autoplayTime);
    } else renderVisible();
  }

  renderCarousel();

  // Add {autoplay:true} as argument to above to autplay the carousel.

  this.makeNextVisible = makeNextVisible;
  this.makePrevVisible = makePrevVisible;
})();

.carousal {
  display: flex;
  align-items: center;
}
.carousal__wrapper {
  width: 500px;
  height: 400px;
}
.carousal__images {
  display: flex;
  overflow: hidden;
  list-style-type: none;
  padding: 0;
}
.carousal__image--visible {
  position: relative;
}
.carousal__image {
  display: none;
}

<div class='carousal'>
  <div class='carousal__left'>
    <button onclick='makePrevVisible()'>Left</button>
  </div>
  <section class='carousal__wrapper'>
    <ul class='carousal__images'>
      <li class='carousal__image'>
        <img src='https://fastly.syfy.com/sites/syfy/files/styles/1200x680/public/2018/03/dragon-ball-super-goku-ultra-instinct-mastered-01.jpg?offset-x=0&offset-y=0' alt='UI Goku' / width='500' height='400'/>
      </li>
      <li class='carousal__image'>
        <img src='https://www.theburnin.com/wp-content/uploads/2019/01/super-broly-3.png' alt='Broly Legendary'  width='500' height='400'/>
      </li>
      <li class='carousal__image'>
        <img src='https://lh3.googleusercontent.com/proxy/xjEVDYoZy8-CTtPZGsQCq2PW7I-1YM5_S5GPrAdlYL2i4SBoZC-zgtg2r3MqH85BubDZuR3AAW4Gp6Ue-B-T2Z1FkKW99SPHwAce5Q_unUpwtm4' alt='Vegeta Base' width='500' height='400'/>
      </li>
      <li class='carousal__image'>
        <img src='https://am21.mediaite.com/tms/cnt/uploads/2018/09/GohanSS2.jpg' alt='Gohan SS2'  width='500' height='400'/>
      </li>
    </ul>
  </section>
  <div class='carousal__right'>
    <button onclick='makeNextVisible()'>Right</button>
  </div>
</div>

Updated codepen with feedback from the below answers and minor additional functionalities = https://codepen.io/lapstjup/pen/RwoRWVe

解决方案

I think the trick is pretty simple. ;)

You should not move one or two images at the same time. Instead you should move ALL images at once.

Let's start with the CSS:

.carousal {
  position: relative;
  display: block;
}

.carousal__wrapper {
  width: 500px;
  height: 400px;
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.carousal__wrapper,
.carousal__images {
  transform: translate3d(0, 0, 0);
}

.carousal__images {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.carousal__image {
  float: left;
  height: 100%;
  min-height: 1px;
}

2nd step would be to calculate the maximum width for .carousal__images. For example in your case 4 * 500px makes 2000px. This value must be added to your carousal__images as part of the style attribute style="width: 2000px".

3rd step would be to calculate the next animation point and using transform: translate3d. We start at 0 and want the next slide which means that we have slide to the left. We also know the width of one slide. So the result would be -500px which also has to be added the style attribute of carousal__images => style="width: 2000px; transform: translate3d(-500px, 0px, 0px);"

That's it.

Link to my CodePen: Codepen for Basic Carousel with Autoplay

这篇关于动画以下轮播实现的最低限度步骤是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！