使用translateX而不是margin-left的CSS影片，可能嗎？-有解無憂

最近，我遇到了演示邊距和變換影片之間區別的視頻。不幸的是，我不記得視頻標題或鏈接。但基本上它聲稱使用transform:translateX()比更流暢margin-left，尤其是在節流模式下。

我用制作了一個自動幻燈片margin-left，我正在嘗試用重寫影片translateX，但還想不通。
任何幫助將不勝感激。

body {
  margin: 0;
}

#slides {
  display: flex;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

#slidewrapper {
  width: calc(6 * 100vw);
  /* you need to use calc for math */
  animation: slide 26s ease infinite;
}

.slide {
  /* float: left; <- unnecessary */
  height: 100vh;
  width: 100vw;
}

.landingphoto {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}

@keyframes slide {
  20% {
    margin-left: 0;
  }
  30% {
    margin-left: -100%;
  }
  50% {
    margin-left: -100%;
  }
  60% {
    margin-left: -200%;
  }
  70% {
    margin-left: -200%;
  }
  80% {
    margin-left: -300%;
  }
  90% {
    margin-left: -300%;
  }
}

<div id="slides">
  <div id="slidewrapper"></div>
  <div class="slide">
    <img src="https://source.unsplash.com/ULmaQh9Gvbg/1600x900" class="landingphoto">
  </div>
  <div class="slide">
    <img src="https://source.unsplash.com/ggZuL3BTSJU/1600x900" class="landingphoto">
  </div>
  <div class="slide">
    <img src="https://source.unsplash.com/yXpA_eCbtzI/1600x900" class="landingphoto">
  </div>
  <div class="slide">
    <img src="https://source.unsplash.com/RyRpq9SUwAU/1600x900" class="landingphoto">
  </div>
  <div class="slide">
    <img src="https://source.unsplash.com/BeOW_PJjA0w/1600x900" class="landingphoto">
  </div>
</div>

uj5u.com熱心網友回復：

不要使用 ID，組件是可重用的。僅使用類。
說話或可重用性，不要animation在 CSS 中硬編碼。如果您只添加一張圖片或洗掉一張圖片，您會發現自己需要痛苦地修改 CSS 以適應問題。改用JavaScript（與 CSS 結合使用transform）

// Carousel (slides):

const carousel = (elCarousel) => {
  
  const timePause = 4000;
  const timeAnim = 1000;
  
  const elsSlides = elCarousel.children;
  const tot = elsSlides.length;
  let itv;
  let c = 0; // current slide index
  
  elCarousel.style.transition = `transform ${timeAnim}ms`;
  
  const anim = () => { elCarousel.style.transform = `translateX(${-c * 100}%)`; };
  const play = () => { itv = setInterval(next, timePause); };
  const stop = () => { clearInterval(itv); };
  const next = () => { c  = 1;c %= tot; anim(); };
  
  play();
  
};

// Apply carousel to desired elements:
document.querySelectorAll(".slidesWrapper").forEach(carousel);

/*QuickReset*/ * {margin:0; box-sizing: border-box;}

.slides {
  overflow: hidden;
}
.slidesWrapper {
  display: flex;
}
.slide {
  position: relative;
  flex: 0 0 100%;
  min-height: 200px;
}
.slide img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="slides">
  <div class="slidesWrapper">
    <div class="slide">
      <img src="https://source.unsplash.com/ULmaQh9Gvbg/1600x900" class="landingphoto">
    </div>
    <div class="slide">
      <img src="https://source.unsplash.com/ggZuL3BTSJU/1600x900" class="landingphoto">
    </div>
    <div class="slide">
      <img src="https://source.unsplash.com/yXpA_eCbtzI/1600x900" class="landingphoto">
    </div>
    <div class="slide">
      <img src="https://source.unsplash.com/RyRpq9SUwAU/1600x900" class="landingphoto">
    </div>
    <div class="slide">
      <img src="https://source.unsplash.com/BeOW_PJjA0w/1600x900" class="landingphoto">
    </div>
  </div>
</div>

You can have as many carousels as you want!

<div class="slides">
  <div class="slidesWrapper">
    <div class="slide">
      <img src="https://source.unsplash.com/RyRpq9SUwAU/1600x900" class="landingphoto">
    </div>
    <div class="slide">
      <img src="https://source.unsplash.com/yXpA_eCbtzI/1600x900" class="landingphoto">
    </div>
    <div class="slide">
      <img src="https://source.unsplash.com/BeOW_PJjA0w/1600x900" class="landingphoto">
    </div>
  </div>
</div>

PS：如果你想在 mouseenter 上暫停影片并在 mouseleave 上重新啟動影片，只需添加以下兩行：

elCarousel.addEventListener("pointerenter", stop);
elCarousel.addEventListener("pointerleave", play);

uj5u.com熱心網友回復：

基本問題是包裝元素實際上并沒有包裝幻燈片，它就在幻燈片之前。

給定的代碼有效，因為它將包裝器的邊距設定為負數，因此所有內容都被該數量所取代。

因此，我們不能只將邊距設定轉換為 translateX 設定。

相反，這個片段使包裝器包裝幻燈片。它將其設定為 flex，以便幻燈片彼此并排放置，然后在影片中以 100vw 的倍數對其自身進行平移。

你是對的，翻譯可以比設定邊距更平滑，這似乎是在使用瀏覽器移動模擬器時出現的。

body {
  margin: 0;
}

#slidewrapper {
  width: calc(6 * 100vw);
  /* you need to use calc for math */
  animation: slide 26s ease infinite;
  display: flex;
  overflow: hidden;
  height: 100vh;
  margin: 0;
}

.slide {
  /* float: left;  unnecessary */
  height: 100vh;
  width: 100vw;
  display: inline-block;
}

.landingphoto {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}

@keyframes slide {
  20% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-100vw);
  }
  50% {
    transform: translateX(-100vw);
  }
  60% {
    transform: translateX(-200vw);
  }
  70% {
    transform: translateX(-200vw);
  }
  80% {
    transform: translateX(-300vw);
  }
  90% {
    transform: translateX(-300vw);
  }
}

<div id="slides">
  <div id="slidewrapper">
    <div class="slide">
      <img src="https://source.unsplash.com/ULmaQh9Gvbg/1600x900" class="landingphoto">
    </div>
    <div class="slide">
      <img src="https://source.unsplash.com/ggZuL3BTSJU/1600x900" class="landingphoto">
    </div>
    <div class="slide">
      <img src="https://source.unsplash.com/yXpA_eCbtzI/1600x900" class="landingphoto">
    </div>
    <div class="slide">
      <img src="https://source.unsplash.com/RyRpq9SUwAU/1600x900" class="landingphoto">
    </div>
    <div class="slide">
      <img src="https://source.unsplash.com/BeOW_PJjA0w/1600x900" class="landingphoto">
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

這是我的嘗試，我在代碼中添加了一些注釋

body {
  margin: 0;
}

#slides {
  display: flex;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

#slidewrapper {
  width: calc(6 * 100vw);
  transition: all 2s; /* added this line */
}

.slide {
  height: 100vh;
  width: 100vw;
  animation: slide 16s ease infinite; /* move this line from #slidewrapper */
}

.landingphoto {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}

@keyframes slide {
  20% {
    transform: translateX(0); /* changed this line */
  }
  90% {
    transform: translateX(-400vw); /* changed this line */
  }
}

<div id="slides">
            <div id="slidewrapper"></div>
                <div class="slide">
                    <img src="https://source.unsplash.com/ULmaQh9Gvbg/1600x900"class="landingphoto">
                </div>
                <div class="slide">
                    <img src="https://source.unsplash.com/ggZuL3BTSJU/1600x900" class="landingphoto">
                </div>
                <div class="slide">
                    <img src="https://source.unsplash.com/yXpA_eCbtzI/1600x900" class="landingphoto">
                </div>
                <div class="slide">
                    <img src="https://source.unsplash.com/RyRpq9SUwAU/1600x900" class="landingphoto">
                </div>
                <div class="slide">
                    <img src="https://source.unsplash.com/BeOW_PJjA0w/1600x900" class="landingphoto">
                </div>
        </div>

你是這個意思嗎？希望這有幫助

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/488229.html

標籤：html css 动画转换利润

上一篇：影片效果在我螢屏的底部，應該是整個螢屏

下一篇：在Next.js中更改頁面時，Tailwind影片播放兩次？