web-dev-qa-db-fra.com

transition de fondu du carrousel de twitter bootstrap

voici une question complémentaire concernant la réponse de @StrangeElement à cette question plus ancienne: Le plug-in Twitter Bootstrap Carousel peut-il apparaître et disparaître en fondu

j'ai essayé le mod de @ StrangeElement sur le fichier bootstrap.css et je l'ai presque fait fonctionner. le problème est que lorsque l'image active s'estompe, elle passe au blanc, puis l'image suivante apparaîtra sans animation en fondu. Que pourrais-je manquer ici?

voici l'exemple avec lequel je travaille:

http://planetofsoundonline.com/beta/index.php

tout type de pointeur serait extrêmement apprécié. Merci!

javascriptcsstwitter-bootstrapcarousel
12
Dan Byers

Prenez un regardez ce violon . Malheureusement, cela ne fonctionne avec aucune des versions actuellement disponibles d'Internet Explorer.

Votre carrousel div n'a besoin que d'une classe supplémentaire carousel-fade ajoutée pour fonctionner.

[ source ]

Cette transition affiche l'image suivante, puis la nouvelle image estompée. Si vous souhaitez une animation de fondu en fondu direct, ajoutez ces lignes au fichier css.

.carousel.carousel-fade .item {
  opacity:0;
}

.carousel.carousel-fade .active.item {
    opacity:1;
}
23
G.T.

Qu'en est-il d'ajouter:

 filter: alpha(opacity=100); /* ie fix */

Résultant en:

.carousel.carousel-fade .item {
  opacity:0;
  filter: alpha(opacity=0); /* ie fix */
}

.carousel.carousel-fade .active.item {
    opacity:1;
    filter: alpha(opacity=100); /* ie fix */
}
7
pwnjack

J'ai réussi à changer le carrousel en atténuant les images au lieu de les faire glisser. Et j'ai également redimensionné les images via CSS pour qu'elles soient réactives:

img.carousel-img {
  max-width:1900px;
  width:100%;
}

Malheureusement, dans les navigateurs Web, alors que l'animation en fondu était active, chaque image a été redimensionnée à sa taille d'origine. Et immédiatement après chaque animation, l'image sera redimensionnée correctement, conformément à la règle CSS ci-dessus (immédiatement, non animée). Bien sûr, l’animation avait l’air amateur et le bégaiement de cette façon. Alors j'ai ajouté

-webkit-transform: translate3d(0,0,0);

la règle de transition et de décoloration du carrousel et l’animation fonctionnent à merveille depuis lors. La règle ressemble donc à:

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transform: translate3d(0,0,0);  /* WEBKIT-FIX FOR FADING SCALED IMAGES CORRECTLY VIA CSS-TRANSITIONS */
}

Ici, j'ai trouvé cette solution: Pourquoi appliquer '-webkit-backface-visibilité: hidden;' résoudre les problèmes avec la transition de la marge négative sur ios/ipad 5.1?

2
Dennis Helfensteller

J'espère que cela aide la personne suivante. Je voulais Scale and Fade.

Il n’est vraiment pas nécessaire d’ajouter une classe supplémentaire. Bootstrap 3.3.6

Fondu et gamme (prend en compte les flèches gauche/droite)

/* Carousel Scale and Fade */

/* Carousel Fade */
.carousel .item {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.carousel .active.left, .carousel .active.right {
    left: 0;
    opacity: 0;
    z-index: 2;
}
.carousel .next, .carousel .prev {
    left: 0;
    opacity: 1;
    z-index: 1;
}

/* Carousel Scale */
.carousel .item.active {
    animation: zoom 30s;
    -moz-animation: zoom 30s;
    -webkit-animation: zoom 30s;
    -o-animation: zoom 30s;
}
@keyframes zoom {
    from {transform:scale(1);}
    to {transform:scale(2);}
}
@-moz-keyframes zoom {
    from {-moz-transform:scale(1);}
    to {-moz-transform:scale(2);}
}
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(1);}
    to {-webkit-transform:scale(2);}
}
@-o-keyframes zoom {
    from {-o-transform:scale(1);}
    to {-o-transform:scale(2);}
}
0
Shawn Rebelo