轮播淡入淡出幻灯片在过渡动画期间导致空白

Question

<div id="ca" class="carousel slide carousel-fade">
	<div class="carousel-inner" ng-if = "true">
		<div class="item active">
			<img class="img-responsive" src="/assets/images/one.png">
		</div>
		<div class="item">
			<img class="img-responsive" src="/assets/images/two.png">
		</div>
		<div class="item">
			<img class="img-responsive" src="/assets/images/three.png">
		</div>
		<div class="item">
			<img class="img-responsive" src="/assets/images/cfour.png">
		</div>
		<div class="item">
			<img class="img-responsive" src="/assets/images/five.png">
		</div>
		<div class="item">
			<img class="img-responsive" src="/assets/images/six.png">
		</div>
	</div>
</div>

.carousel-fade .carousel-inner .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    overflow:hidden;
}
.item.active img {
     transition: transform 6000ms linear 0s;
    /* This should be based on your carousel setting. For bs, it should be 5second*/
    /*scale increases the width and height 1.05 times*/
    transform: scale(1.05, 1.05);
    -webkit-animation: fadeinout 5950ms linear forwards;
    animation: fadeinout 5950ms linear forwards;
}
@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
   25% { opacity:0.50;}
  50% { opacity: 1; }
}
@keyframes fadeinout {
  0%,100% { opacity: 0; }
  25% { opacity:0.50;}
  50% { opacity: 1; }
}
.carousel-fade .carousel-inner .active {
    /*opacity: 1;*/
  animation: mktrans 5100ms linear forwards;
}
@keyframes mktrans {
    0% { opacity:1;}
    50% { opacity:0.50;}
    75% { opacity:0.75}
    100% {
    opacity:0;
    }
}
.carousel-fade .carousel-control {
    z-index: 2;
}

.item img{
    max-height: 320px;
    width: 100%;
}

此代码在转换时会在 carousel-inner 上产生白色背景。尝试了其他答案中给出的不同方法，但没有帮助。

Answer 1

我相信你必须修改控制轮播本身的 javascript，基本上你需要告诉它在移除活动组件之前等待更长的时间。