Twitter di bootstrap carosello dissolvenza di transizione

Question

questa è una domanda di follow-up per quanto riguarda la risposta da @StrangeElement a questa domanda più vecchio: Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

ho provato @ mod StrangeElement al bootstrap.css e ho quasi averlo lavorare. il problema è che quando l'immagine attiva si dissolve, si dissolve in bianco, quindi l'immagine successiva apparirà senza animazioni. cosa potrei mancare qui?

Ecco l'esempio con cui sto lavorando:

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

qualsiasi tipo di puntatori sarebbe enormemente apprezzato. Grazie!

Answer 1

Prendere uno look at this fiddle. Sfortunatamente non funziona su nessuna delle versioni attualmente disponibili di Internet Explorer.

La tua giostra div ha bisogno solo di una classe aggiuntiva carousel-fade aggiunta, perché funzioni.

[source]

Questa transizione mostra l'immagine successiva e poi svanisce la nuova immagine su di esso. Se vuoi una dissolvenza in dissolvenza diretta in animazione, aggiungi queste righe al css.

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

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

Answer 2

Che dire aggiungendo:

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

Con conseguente:

.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 */ 
} 

Answer 3

ho cambiato con successo la giostra al fading immagini invece di scorrimento. E ho anche scalato le immagini tramite CSS in modo che siano sensibili:

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

Purtroppo su WebKit browser, mentre il fading-animazione è stata attiva, ogni immagine è stata ridimensionata fino al suo originale-size. E subito dopo che ciascuna animazione è terminata, l'immagine verrà ridimensionata correttamente come da sopra la regola CSS (immediatamente, non animata). Ovviamente l'animazione sembrava amatoriale & balbettando in questo modo. Così ho aggiunto

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

alle carousel's dissolvenza di transizione-regola e l'animazione funziona come un fascino da allora. Quindi la regola è simile a:

.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 */ 
} 

qui ho trovato questa soluzione: Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios/ipad 5.1?

Answer 4

Speriamo che aiuta la persona accanto. Volevo Scala e Dissolvenza.

In realtà non è necessario aggiungere una classe aggiuntiva. Bootstrap 3.3.6

Fade e Scale (Ci vogliono Freccia sinistra/destra in considerazione)

/* 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);} 
}