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

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%;
}

转换时，此代码会导致轮播内部出现白色背景。尝试了其他答案中给出的不同方法，但没有帮助。

Answer 1

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