Bootstrap傳送帶轉換效果不起作用

Question

我使用淡入淡出轉換進行了我的引導程序4傳送帶轉換。但是，該效果不會出現在旋轉木馬上。

HTML代碼：

<div id="testimonialsSlides" class="carousel carousel-fade" data-ride="false" data-interval="5000"> 
    <div class="carousel-inner" role="listbox">           <div class="carousel-item"> 
       <div class="study-text"> 
        <p>「This is test 1」</p> 
       </div>  
       <div class="clearfix"></div> 
      </div> 
     <div class="carousel-item"> 
      <div class="study-text"> 
       <p>「This is test 2」</p> 
      </div> 

      <div class="clearfix"></div> 
     </div> 
     <div class="carousel-item active"> 
      <div class="study-text"> 
       <p>「This is test 3」</p> 
      </div> 
      <div class="clearfix"></div> 
     </div> 
                        </div> 

    <div class="arrows-wrap"> 
     <a class="prev" href="#testimonialsSlides" role="button" data-slide="prev"> 
      <i class="fa fa-angle-left" aria-hidden="true"></i> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="next" href="#testimonialsSlides" role="button" data-slide="next"> 
      <i class="fa fa-angle-right" aria-hidden="true"></i> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div> 

CSS代碼：

.carousel-fade .carousel-item { 
    opacity: 0; 
    transition: opacity .75s ease-in-out; 
} 
.carousel-fade .carousel-item.active { 
    opacity: 1; 
} 

我不知道發生了什麼事衰落過渡。你有什麼想法嗎？

請看看演示：http://jsfiddle.net/yv80533m/23

Answer 1

我找到了一個解決方案。原來，這個職位有問題。我將位置改爲絕對位置，除了第一個元素之外，所有的過渡效果都起作用。

SCSS代碼：

.carousel-fade { 
    .carousel-item{ 
    opacity: 0; 
    top: 0; 
    left: 0; 
    width: 100%; 
    display: block; 
    position: absolute; 
    transition: opacity .75s ease-in-out; 
    &:first-of-type { 
     position:relative; 
    }   
     &.active { 
      opacity: 1; 
     } 
    } 
} 

你可以在這裏檢查演示：http://jsfiddle.net/yv80533m/29/