Bootstrap Alpha Carousel Fade Transition

我使用的是未修改的Bootstrap v4.0.0-alpha.3。Bootstrap Alpha Carousel Fade Transition

我實現了一個傳送帶，幾乎和這裏一樣（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>

的旋轉木馬正確顯示出來，但它並沒有顯示出褪色性能。似乎是V4.0.0和V4.0.3之間的兼容性問題

來源

2016-08-29 java4ever

可您發佈的HTML？這可能會有很大的幫助 –

您是否嘗試在''div id =「myCarousel」class =「carousel slide」data-ride =「carousel」>''上將'.slide'類更改爲'.carousel-fade'？ –

改變了一下問題。複製了codepen代碼，它不起作用，似乎是一個兼容性問題。 – java4ever

我得到它的工作使用下面的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; 
     } 
    } 
}

來源

2017-06-26 08:07:21

Bootstrap Alpha Carousel Fade Transition

回答

相關問題