1
glissière de fondu carrousel provoque espace blanc pendant l'animation de transition
<div id="ca" class="carousel slide carousel-fade">
\t <div class="carousel-inner" ng-if = "true">
\t \t <div class="item active">
\t \t \t <img class="img-responsive" src="/assets/images/one.png">
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="img-responsive" src="/assets/images/two.png">
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="img-responsive" src="/assets/images/three.png">
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="img-responsive" src="/assets/images/cfour.png">
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="img-responsive" src="/assets/images/five.png">
\t \t </div>
\t \t <div class="item">
\t \t \t <img class="img-responsive" src="/assets/images/six.png">
\t \t </div>
\t </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%;
}Ce code provoque un fond blanc sur un carrousel interne lors de la transition. J'ai essayé différentes approches données dans d'autres réponses et n'a pas aidé.