Question

我目前正试图在我的页面上淡入淡出图像，但它们只是消失然后在下一张图像中消失，而不是开始淡化旧图像上方的图像并将其删除。

CSS：

#mainContent div.activelink {
    position: absolute;
}

.carousel-fade .carousel-inner .item {opacity: 0; transition-property: opacity; -webkit-transition-property: opacity; }
.carousel-fade .carousel-inner .active {opacity: 1;}
.carousel-fade .carousel-inner .active.left {left: 0; opacity: 0.5; z-index: 1;}
.carousel-fade .carousel-inner .active.right {left: 0; opacity: 0; z-index: 1;}
.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {opacity: 1;}

.carousel-inner > .item {


    -webkit-transition: 3s ease-in-out left;
    -moz-transition: 3s ease-in-out left;
    -o-transition: 3s ease-in-out left;
    transition: 3s ease-in-out left;

}

HTML

<div class="activelink" id="link-6" data-toggle="modal" data-target="#modalVideo-trailer">
                            <div id="carousel-link-6" class="carousel slide carousel-fade" data-ride="carousel">
                                <div class="carousel-inner" role="listbox">
                                  <div class="item active"><a href="#"><img src="images/grouptrailer-1.png" alt=""></a></div>
                                  <div class="item"><a href="#"><img src="images/grouptrailer-2.png" alt=""></a></div>
                                  <div class="item"><a href="#"><img src="images/grouptrailer-3.png" alt=""></a></div>
                                  <div class="item"><a href="#"><img src="images/grouptrailer-4.png" alt=""></a></div>
                                </div>
                            </div>
                        </div>

Answer 1

我误解了你的动画方法，抱歉。您必须使用Bootstrap的轮播功能（因为我无法在不添加Bootstrap组件的情况下使您的代码正常工作）。 this SO post中解决方案中的CSS适用于您的代码。我在这个jsbin中将CSS添加到您的HTML中（使用imgur图像进行演示），它可以按照您的意图运行。

旋转木马图像不会消失

1 个答案: