Bootstrap轮播过渡效果不起作用答案

【问题标题】：Bootstrap carousel transition effect doesn't workBootstrap轮播过渡效果不起作用
【发布时间】：2018-01-16 12:29:01
【问题描述】：

我在 bootstrap 4 carousel 过渡中使用了淡入淡出过渡。但是，效果不会出现在轮播上。

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

【问题讨论】：

标签： css twitter-bootstrap carousel bootstrap-4

【解决方案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/

【讨论】：