Animazione dissolvenza tra transizioni di stato nel router uff.

Question

Sto utilizzando l'interfaccia router nella mia applicazione web. Root Codice div è:

<div ui-view="content" class="fade-in-up"></div> 

Quando vado da uno stato ad un altro (/ ordini a/Feedback negli screenshot qui sotto), il primo stato non nasconde prima dell'animazione dissolvenza del nuovo Stato è terminata.

mio css è:

@-webkit-keyframes fadeInUp { 
    0% { 
opacity: 0; 
-webkit-transform: translateY(15px); 
} 
100% { 
opacity: 1; 
-webkit-transform: translateY(0); 
} 
} 
@-moz-keyframes fadeInUp { 
0% { 
opacity: 0; 
-moz-transform: translateY(15px); 
} 
100% { 
    opacity: 1; 
    -moz-transform: translateY(0); 
} 
} 
@-o-keyframes fadeInUp { 
0% { 
opacity: 0; 
-o-transform: translateY(15px); 
} 
100% { 
    opacity: 1; 
    -o-transform: translateY(0); 
    } 
    } 
    @keyframes fadeInUp { 
    0% { 
    opacity: 0; 
    transform: translateY(15px); 
} 
100% { 
    opacity: 1; 
    transform: translateY(0); 
    } 
    } 
    .fade-in-up { 
    -webkit-animation: fadeInUp .5s; 
    animation: fadeInUp .5s; 
    } 

Dove sbaglio?

Answer 1

ho appena postato un tutorial with a working demo che mostra come fare questo usando ngAnimate con CSS transizioni.

Ci sono un paio di transizioni nella demo, questo è il frammento di codice CSS per la dissolvenza in nuove viste sull'elemento principale:

/* start 'enter' transition on main view */ 
main.ng-enter { 
    /* transition on enter for .5s */ 
    transition: .5s; 

    /* start with opacity 0 (invisible) */ 
    opacity: 0; 
} 

/* end 'enter' transition on main view */ 
main.ng-enter-active { 
    /* end with opacity 1 (fade in) */ 
    opacity: 1; 
} 

C'è solo una transizione .ng-enter e non su .ng-leave, che fa sì che il nuovo vista (che sta entrando) per la dissolvenza in apertura mentre la vecchia vista (che sta partendo) scompare istantaneamente senza transizione.

Answer 2

È possibile utilizzare le classi .ng-enter e .ng-leave (se è stato incluso il modulo 'ng-animate') per attivare le animazioni. Poi si può fare qualcosa di simile nel vostro file CSS:

[ui-view].ng-leave { 
    animation: fadeOut 0.5s; 
} 

[ui-view].ng-enter { 
    animation: fadeIn 0.5s; 
} 

o semplicemente impostare una proprietà di transizione con una durata sulle proprietà di trasformazione e di opacità e appena li impostare di conseguenza nelle classi ng-enter e ng-leave.

Answer 3

Prova ad aggiungere alla classe "principale" al tuo DIV in modo che assomiglia a questo:

<div ui-view="content" class="main"></div> 

quindi utilizzare questo CSS:

.main.ng-enter { 
    transition: 0.25s; 
    opacity: 0; } 
.main.ng-enter-active { 
    opacity: 1; } 
.main.ng-leave { 
    transition: 0.25s; 
    opacity: 1; } 
.main.ng-leave-active { 
    opacity: 0; } 

Answer 4

ui-router sarà licenziare il tuo cambiamento ui-view itinerario visualizzare presso il allo stesso tempo della vista in arrivo. Quindi quello che ottieni è il precedente ui-view ancora visibile mentre il successivo ui-view viene visualizzato e se stai animando la vista, allora ci sarà quella durata della transizione di sovrapposizione tra n la vecchia visione e la nuova. si dovrebbe guardare in tenendo a bada sulla rendendo la nuova ui-view fino a quando il vecchio è finito animare out (prima di animare la nuova in)

vorrei guardare negli ui-router$rootScope eventi di modifica dello stato di attingere a questa (https://github.com/angular-ui/ui-router/wiki#state-change-events).

## Hold off on the state change, until current (previous) state has finished animating out 
$rootScope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) -> 
    console.log "state change start", arguments 

$rootScope.$on '$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) -> 
    console.log "state change success", arguments 

hanno anche un aspetto che l'esempio di questa persona http://homerjam.github.io/angular-ui-router-anim-in-out. hanno creato un modulo che si aggancia nella ui-view e rompe il cambiamento in un enter e leave dove è possibile attivare l'animato in (di nuova vista) dopo l'animato fuori (di vecchia concezione) http://homerjam.github.io/angular-ui-router-anim-in-out/anim-in-out.js

questa persona spiega cosa sta accadendo con il ui-view cambiamento duplicazione https://youtu.be/W89DYSthCTQ?t=345