Question

我正在使用未经修改的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正确显示，但不显示淡入淡出属性。似乎是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;
        }
    }
}

Bootstrap Alpha Carousel淡入淡出过渡

1 个答案: