Incroci transizioni CSS con ngAnimate su Chrome

Question

Ho notato che con ngAnimate le transizioni CSS caricate sono "a scatti" su Chrome quando vengono interrotte con un'altra transizione. Cioè, sembrano passare direttamente allo stato di destinazione, piuttosto che iniziare dal valore corrente. Le stesse identiche transizioni sono molto più fluide senza ngAnimate caricato e più fluido su Firefox con/senza ngAnimate.

Ad esempio, un elemento semplice che aggiunge/rimuove una classe su clic:

<bigger-on-click-class class="{{showBigger ? 'bigger' : ''}}" ng-click="showBigger = !showBigger"></bigger-on-click-class> 

animato dal passaggio CSS:

bigger-on-click-class { 
    display: block; 
    height: 200px; 
    width: 200px; 
    background: red; 
    -webkit-transition: height 5s; 
    transition: height 5s; 
} 

bigger-on-click-class.bigger { 
    height: 400px; 
} 

si comporta in modo diverso su più scatti in rapida successione, a seconda se è stato caricato ngAnimate:

http://plnkr.co/edit/Fhwbd3WRiz5wHRIm10y3?p=preview senza ngAnimate http://plnkr.co/edit/WSED064MV2dtPnsEQuti?p=preview con ngAnimate

Se si prova a fare clic più volte su caselle rosse negli esempi precedenti, si dovrebbe vedere cosa intendo, oppure fare clic sotto per visualizzare uno screencast.

parte non caricare ngAnimate, c'è un modo per evitare questo, in modo che interrompono animazioni partono dal valore/posizione attualmente visualizzata?

Modifica: i collegamenti iniziali non erano corretti. Inoltre, il comportamento a scatti è stato osservato in Chrome, ma non in Firefox. Edit: riformulata la questione per renderlo più chiaro è una differenza Chrome/Firefox

Answer 1

ho notato quando l'animazione si verifica lo stile viene impostato su:

transition: none; 
-webkit-transition: none; 

presumo ngAnimate imposta queste proprietà di stile durante la sua elaborazione e gli altri browser non ne sono influenzati durante il breve momento in cui sono impostati, ma quando Chrome li vede termina immediatamente l'animazione come se non fosse stata applicata alcuna transizione.

Quindi, per risolvere il problema è sufficiente per garantire queste proprietà vengono ignorati impostando le proprietà importanti:!

transition: height 5s !important; 
-webkit-transition: height 5s !important; 

che può essere visto lavorare nel plnkr here

Answer 2

Un modo per evitare il jerkiness: upgrade ad Angular 1.3. Per citare Angular 1.3 beta 7 ngAnimate docs

versioni precedenti di ngAnimate possono aver causato le transizioni CSS naturali per rompere e non rendere correttamente a causa di $ animare bloccare temporaneamente le transizioni utilizzando 0s nessuno

E la differenza si può vedere nel mio Plunker using Angular 1.3 beta 7

Answer 3

Nel mio caso il problema era perché la classe css di ng-hide era impostata per la visualizzazione: nessuna e l'animazione non funzionava in chrome, ma funziona in safari.