La transizione CSS viene interrotta dopo essere stata applicata all'elemento con animazione CSS

Question

Sto costruendo un'applicazione AngularJS che mostra e nasconde un elemento spostando la sua opacità. L'elemento viene anche ruotato applicando un'animazione keyframe CSS. Il problema che sto affrontando è la transizione o l'animazione che balbetta.

Quando l'elemento ha un'opacità pari a 1 e la transizione la sfuma a 0, l'elemento sembra tornare indietro di alcuni fotogrammi. Questo è meglio dimostrato in una GIF. Puoi vederlo saltare prima che cambi l'opacità.

Questo è il mio CSS.

.square { 
    width: 100px; 
    height: 100px; 
    margin: 50px; 
    background: black; 
} 

.appear.ng-hide-add { 
    -webkit-transition: opacity 300ms linear; 
    opacity: 1; 
} 

.appear.ng-hide-add.ng-hide-add-active { 
    opacity: 0; 
} 

.appear.ng-hide-remove { 
    -webkit-transition: opacity 300ms linear; 
    opacity: 0; 
} 

.appear.ng-hide-remove.ng-hide-remove-active { 
    opacity: 1; 
} 

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 

    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

.rotate { 
    -webkit-animation: rotate 1.5s infinite linear; 
} 

Questo è il mio codice HTML.

<div ng-app="app" ng-init="show = true"> 
    <p>Toggle the opacity of the square. Sometimes the rotation is interrupted when the opacity transitions from 1 to 0.</p> 
    <button ng-click="show =!show">Toggle</button> 
    <div class="square appear rotate" ng-show="show"></div> 
</div> 

È possibile giocare con il tutto in questo codepen. Sperando che qualcuno possa indicarmi la giusta direzione.

Answer 1

Ecco uno soluzione più giusta per il gusto di farlo. Un po 'meno brutto del primo che ho suggerito. Modificare la casella colore di sfondo di opacità: http://codepen.io/anon/pen/DpuEh

HTML:

<div ng-app="app" ng-init="show = true"> 
    <button ng-click="show = !show">Toggle</button> 
    <div class="square appear rotate" ng-class="{'hidden': !show}"></div> 
</div> 

CSS:

.square { 
    width: 100px; 
    height: 100px; 
    margin: 50px; 
    -webkit-transition: background 300ms linear; 
    background: black; 
} 

.square.hidden { 
    background: rgba(0, 0, 0, 0); 
} 

sto usando rgba per impostare l'opacità di fondo. Anche l'impostazione dello sfondo su white avrebbe funzionato in questo semplice caso.

Answer 2

Questo è evidentemente un bug di WebKit. Questo chiaramente non è come dovrebbe comportarsi il CSS, e si comporta come previsto in Firefox se si rimuovono i prefissi del venditore. Noterai che l'animazione si resetta quando vengono applicate animazioni/transizioni aggiuntive. Questo è simile a un bug noto che è stato recentemente risolto in cui più transizioni CSS applicate in momenti diversi causavano un layout flash. Consiglierei di segnalare il bug al team di WebKit in modo che possa essere riparato.

Answer 3

Vorrei prendere in considerazione l'uso di translate3D sulla trasformazione per forzare l'accelerazione hardware.

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

Questo utilizza l'accelerazione hardware (GPU) per le transizioni CSS.

Answer 4

Soluzione errata che può o non può essere adatta, a seconda della situazione: anziché nascondere l'elemento (shows the bug) o un contenitore (also shows the bug), è possibile dissolvenza in un elemento di sfondo su di esso.

HTML:

<div ng-app="app" ng-init="show = false"> 
    <button ng-click="show =!show">Toggle</button> 
    <div class="appear" ng-show="show"></div> 
    <div class="square rotate"></div> 
</div> 

CSS:

.appear { 
    background: white; 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    top: 30px; 
    left: 0; 
    z-index: 2; 
} 

Ovviamente potrebbe essere necessario più sofisticati CSS per un layout più sofisticato, ma spero che si ottiene l'idea.

CodePen: http://codepen.io/anon/pen/IwBHj