AngularJS ng-show animazione cross-fade all'interno di ng-repeat

Question

Semplice (ma non per me!) Angularjs mostra/nascondi problema di animazione.

Ho cercato in alto e in basso ma non ho trovato la soluzione a questo problema specifico , che può forse essere spiegato meglio con un esempio e una "sfida".

In primo luogo, l'esempio: http://jsfiddle.net/adammontanaro/QErPe/1/

La sfida: chiunque può fare quelle immagini dissolvenza in entrata e in uscita sopra l'altro, piuttosto che apparire sotto o sopra l'immagine attualmente mostrata, poi popping in posiziona una volta nascosto il div dell'immagine superiore?

Il codice HTML:

<div> 
    <div data-ng-repeat="k in kitties" > 
     <img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" /> 
    </div> 
</div> 

CSS:

.animate-show, .animate-hide { 
    -webkit-transition:all linear 1s; 
    -moz-transition:all linear 1s; 
    -ms-transition:all linear 1s; 
    -o-transition:all linear 1s; 
    transition:all linear 1s; 

} 

.animate-show { 
    opacity:0; 
} 

.animate-show.animate-show-active { 
    opacity:1; 
} 

.animate-hide { 
    opacity:1; 
} 

.animate-hide.animate-hide-active { 
    opacity:0; 
} 

mi sono stati filatura le ruote su questo per ore. Ho visto scads di buoni post che dimostrano come far apparire o sparire una singola immagine o div, ma tutto si rompe quando sto provando a creare dissolvenze incrociate e sostituire. Ho provato a scherzare con il posizionamento assoluto/relativo, ma senza successo.

Provato questo con un interruttore, ma non era in grado di utilizzare $ indice nella condizione di interruttore, quindi ho potuto caricare le mie immagini in fase di esecuzione. Questo è un grande requisito qui.

CRONACA - è usare angolare 1.1.5

Grazie !!! Adam

Answer 1

Hai davvero tutto corretto! Ti manca solo un po 'di CSS.

Ho fissato il jsfiddle con il materiale giusto (un trattino di posizione relativo, assoluto e un pizzico di altezza) e funziona come un incantesimo.

La maggior parte del nuovo materiale è:

.container{ 
    position: relative; 
    /* you have to add a height here if your container isn't otherwise set 
     becuse the absolutely positioned image divs won't calculate the height 
     for you */ 
    height: 100px; 
} 
.image-repeat{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

con le classi applicate nel codice HTML, se necessario.

Check it out: http://jsfiddle.net/QErPe/2/

Speranza che aiuta!

Answer 2

Questo sembra essere più un problema di CSS che un problema angolare. È necessario posizionare i due div uno sopra l'altro e assicurarsi che stiano effettivamente occupando lo stesso spazio nello stesso momento. Dopo di che la dissolvenza incrociata dovrebbe essere un gioco da ragazzi.

Answer 3

È inoltre possibile eseguire semplici CSS3 sulla classe .ng-hide. Per esempio:

div img { 
    border: medium none; 
    margin: 0; 
    padding: 0; 
    opacity: 1; 
    -webkit-transition: opacity 1s ease 0s; 
    -moz-transition: opacity 1s ease 0s; 
    -o-transition: opacity 1s ease 0s; 
    transition: opacity 1s ease 0s; 
} 
div img.ng-hide { 
    opacity: 0; 
} 

Così ora, quando si aggiunge la classe ng-nascondere, svanirà l'opacità dell'immagine. ngAnimate ha il suo posto, ma con un semplice CSS3 sulla classe .ng-hide, puoi eliminare le frustrazioni.