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/