更改 Bootstrap Carousel 淡入淡出过渡 [英] Change Bootstrap Carousel fade transition

问题描述

在 Stackoverflow 上有几个关于轮播淡入淡出过渡的问题，但似乎没有一个适用于默认的 4.0.0 实现:

<ol class="carousel-indicators"><li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators" data-slide-to="1"></li><li data-target="#carouselExampleIndicators" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img class="d-block w-100" src="..." alt="第一张幻灯片">
<div class="carousel-item"><img class="d-block w-100" src="..." alt="第二张幻灯片">

<div class="carousel-item"><img class="d-block w-100" src="..." alt="第三张幻灯片">

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">上一个</span></a><a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">下一步</span></a>

自 Alpha.6 版本以来，bootstrap 是否改变了转换 carousel-item -s 的方式?如何在 4.0.0 中实现淡入淡出过渡而不是幻灯片?

解决方案

Bootstrap 5 Carousel Fade(2021 年更新)

Bootstrap 5 包括淡入淡出"效果，只需将 carousel-fade 类添加到 Carousel 即可使用.默认情况下，过渡持续时间为 0.6 秒.要增加持续时间，并使幻灯片之间的淡入淡出更慢，请覆盖 CSS 上的过渡时间...

/* 改变过渡持续时间来控制淡入淡出效果的速度 */.carousel-item {过渡:转换 2.6 秒的缓入缓出；}.carousel-fade .active.carousel-item-start,.carousel-fade .active.carousel-item-end {过渡:不透明度 0s 2.6s；}

Bootstrap 5 Carousel 淡入较慢

---

Bootstrap 4.0 Carousel Fade(原始答案)

.carousel-fade .carousel-item {不透明度:0；过渡持续时间:.6s；过渡属性:不透明度；}.carousel-fade .carousel-item.active,.carousel-fade .carousel-item-next.carousel-item-left,.carousel-fade .carousel-item-prev.carousel-item-right {不透明度:1；}.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right {不透明度:0；}.carousel-fade .carousel-item-next,.carousel-fade .carousel-item-prev,.carousel-fade .carousel-item.active,.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-prev {变换:translateX(0);变换:translate3d(0, 0, 0);}

<小时>

淡入淡出效果在 4.0 Beta 中从轮播中移除，并且在 4.0.0 中也不可用.这个 pull request 表示淡入淡出效果将在 4.1 或 4.2 中返回.同时，上述 CSS 将适用于 4.0.0

https://codeply.com/go/LhLJlldsLN

There are several questions asked on Stackoverflow regarding Carousel fade transition but none of them seem to work on a default 4.0.0 implementation:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Did bootstrap change the way of transitioning carousel-item -s since Alpha.6 version? How would one go about implementing the fade transition instead of slide in 4.0.0 ?

解决方案

Bootstrap 5 Carousel Fade (update 2021)

Bootstrap 5 includes a "fade" effect that can be used by simply adding the carousel-fade class to the Carousel. By default, the transition duration is .6s. To increase the duration, and make the fade between slides slower, override the transition timing on the CSS...

/* change transition duration to control the speed of fade effect */
.carousel-item {
  transition: transform 2.6s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: opacity 0s 2.6s;
}

Bootstrap 5 Carousel Fade Slower

---

Bootstrap 4.0 Carousel Fade (original answer)

.carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: .6s;
 transition-property: opacity;
}

.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
 opacity: 0;
}

.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
 transform: translateX(0);
 transform: translate3d(0, 0, 0);
}

---

The fade effect was removed from the carousel during the 4.0 Beta and is also not available in 4.0.0. This pull request indicates that the fade effect will return in 4.1 or 4.2. In the meanwhile, the above CSS will work for 4.0.0

https://codeply.com/go/LhLJlldsLN

这篇关于更改 Bootstrap Carousel 淡入淡出过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！