ブートストラップカルーセルトランジションエフェクトが動作しない

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/