Bootstrap Alpha Carousel 淡入淡出过渡答案

【问题标题】：Bootstrap Alpha Carousel Fade TransitionBootstrap Alpha Carousel 淡入淡出过渡
【发布时间】：2016-08-29 16:12:37
【问题描述】：

我使用的是未经修改的 Bootstrap v4.0.0-alpha.3。

我实现了一个轮播，几乎和这里一样 (http://v4-alpha.getbootstrap.com/examples/carousel/)。

好吧，在 Bootstrap V3.X.X 中，您可以轻松更改过渡，但现在我不知道如何将过渡更改为“淡入淡出”。我尝试修改这个例子：(http://codepen.io/zlobae/pen/xwVqGy/) 但我没有运气。这部分

.carousel-fade {
    .carousel-item {
        display: block;
        position: absolute;
        opacity: 0;
        transition: opacity .75s ease-in-out;

        &.active {
            opacity: 1;
        }
    }
}

似乎无法正常工作。

有人知道如何实现渐变过渡吗？

编辑：出于可重复性的原因，HTML 目前与 Codepen 页面中的相同：

<div data-ride="carousel" class="carousel carousel-fade" id="carousel-example-captions">
    <ol class="carousel-indicators">
      <li class="active" data-slide-to="0" data-target="#carousel-example-captions"></li>
      <li data-slide-to="1" data-target="#carousel-example-captions" class=""></li>
      <li data-slide-to="2" data-target="#carousel-example-captions" class=""></li>
    </ol>
    <div role="listbox" class="carousel-inner">
      <div class="carousel-item active">
        <div class="carousel-caption">
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <div class="carousel-caption">
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <div class="carousel-caption">
          <h3>Third slide label</h3>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
      <span aria-hidden="true" class="icon-prev"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
      <span aria-hidden="true" class="icon-next"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Carousel 正确显示，但没有显示 fade 属性。似乎是 v4.0.0 和 v4.0.3 之间的兼容性问题

【问题讨论】：

你能发布你的 HTML 吗？这会很有帮助
您是否尝试过将<div id="myCarousel" class="carousel slide" data-ride="carousel"> 上的.slide 类更改为.carousel-fade？
稍微改变了问题。复制了codepen代码，它不工作，似乎是一个兼容性问题。

标签： jquery html css twitter-bootstrap

【解决方案1】：

我使用以下 CSS 让它工作

// Carousel fade transition
.carousel-fade {
    .carousel-item {
        display: block !important;
        position: absolute;
        transform: none;
        perspective: none;
        opacity: 0;
        transition: opacity .75s ease-in-out;

        &.active {
            opacity: 1;
        }
    }
}

【讨论】：