Bootstrap Alpha轮播淡入淡出过渡

Question

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

我实现了一个旋转木马，几乎与此处相同（ http://v4-alpha.getbootstrap.com/examples/carousel/ ）。

好吧，在Bootstrap V3.XX中，您可以轻松更改过渡，但是现在我不知道如何将过渡更改为“淡入淡出”。 我尝试改编此示例：（ 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>

轮播显示正确，但不显示淡入淡出属性。 似乎是v4.0.0和v4.0.3之间的兼容性问题

Answer 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;
        }
    }
}