Bootstrap 4.0.0轮播淡入淡出过渡 [英] Bootstrap 4.0.0 Carousel fade transition

问题描述

在Stackoverflow上，有几个关于Carousel淡入淡出过渡的问题，但它们似乎都无法在默认的4.0.0实现中起作用:

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>

自Alpha.6版本以来，引导程序是否更改了转换carousel-item -s的方式?如何实现淡入淡出过渡而不是在4.0.0中滑动?

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 ?

推荐答案

我重新打开了它，因为问题已从4 Beta更改为4.0.0(稳定)...

I reopened this because the question was changed from 4 Beta to 4.0.0 (stable)...

Bootstrap 4.0.0轮播淡入淡出:
https://www.codeply.com/go/LhLJlldsLN

Bootstrap 4.0.0 Carousel Fade:
https://www.codeply.com/go/LhLJlldsLN

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

---

在4.0 Beta期间，已从圆盘传送带中删除了淡入淡出效果，并且在4.0.0中也不可用.此拉请求表示淡入淡出效果将在4.1或4.2中返回.同时，上述CSS将适用于4.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

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