javascript - Bootstrap carousel slide 褪色+滑动

Question

我在 bootstrap carousel 上苦苦挣扎了几天，它应该像默认的那样向左/向右滑动，但增加了淡化(新元素进入时慢慢获得不透明度，而前一个元素在移出时慢慢失去不透明度)，我尝试了很多变体，但其中一些在 Firefox 中不起作用，其他的在 Opera 等中一直失败。

这是 HTML:

<section>
    <div class="container">
        <h2>Some title</h2>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
                <p>Some text</p>
                <div class="ingo col-sm-8 col-sm-offset-2">
                    <div id="pubCarousel" class="carousel slide" data-ride="carousel">

                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
                                <h3 class="name longn">Carousel text</h3>
                            </div>

                            <div class="item">
                                <img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
                                <h3 class="name">Carousel text</h3>
                            </div>
                        </div>

                        <div class="pub-counter">
                            <p class="counter-line"></p>
                        </div>

                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#pubCarousel" role="button" data-slide="prev">
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#pubCarousel" role="button" data-slide="next">
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

这是我的轮播设置，它不起作用(我知道它现在很糟糕，我尝试了 10 种解决方案，但它仍然不起作用)，轮播的其余部分是默认设置:

.ingo .carousel-inner>.item {
    -webkit-transition: -webkit-transform 1s ease-in-out, opacity 2s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out, opacity 2s ease-in-out;
    transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel-inner>.item.active,.ingo .carousel-inner>.item.active {
    -webkit-transition: -webkit-transform 1s ease-in-out, opacity .5s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out, opacity .5s ease-in-out;
    transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel .item {
    opacity:0;
}
.ingo .carousel .carousel-inner .active {
  opacity: 1;
}
.ingo .carousel .carousel-inner .next,
.ingo .carousel .carousel-inner .prev
.ingo .carousel .carousel-inner .active.left,
.ingo .carousel .carousel-inner .active.right {
  left: 0;
  opacity: 0;
}
.ingo .carousel .carousel-inner .next.left,
.ingo .carousel .carousel-inner .prev.right {
  opacity: 1;
}

我没有使用任何 JS 修改。我希望这个答案不会重复一些已经发布的问题，我只是找不到解决方案。

感谢大家的帮助，非常感谢。

Answer 1

sitepoint 上的本教程应该可以帮助您:http://www.sitepoint.com/bootstrap-carousel-with-css3-animations/

Animate.css 是非常好的 CSS3 库，我在许多元素中都使用它来“增添趣味”。