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