Bootstrap Karussell Übergangseffekt funktioniert nicht

Question

Ich verwendete Fade Übergang für meine Bootstrap 4 Karussell Übergang. Der Effekt erscheint jedoch nicht auf dem Karussell.

HTML-Code:

<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-Code:

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

Ich bin nicht sicher, was mit dem Verblassen Übergang passiert ist. Hast du eine Ahnung davon?

Bitte sehen Sie die Demo: http://jsfiddle.net/yv80533m/23

Answer 1

ich eine Lösung gefunden. Es stellt sich heraus, dass es ein Problem mit der Position gibt. Ich habe die Position auf absolut geändert, bis auf das erste Element funktioniert dann der Übergangseffekt.

SCSS Code:

.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; 
     } 
    } 
} 

Sie die Demo hier überprüfen: http://jsfiddle.net/yv80533m/29/