Question

我使用淡入淡出过渡来进行我的bootstrap 4轮播过渡。但是，效果并没有出现在旋转木马上。

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代码：

.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/

Bootstrap轮播过渡效果不起作用

1 个答案: