Przejścia CSS zacinają się po zastosowaniu do elementu z animacją CSS

Question

Buduję aplikację AngularJS, która pokazuje i ukrywa element, przenosząc jego krycie. Element jest również obracany poprzez zastosowanie animacji klatki kluczowej CSS. Problemem, który mam, jest przejście lub animacja zacina się.

Gdy element ma krycie równe 1, a przejście zanika go do 0, element pojawia się, aby powrócić do kilku klatek. Jest to lepiej zademonstrowane w GIF. Możesz zobaczyć, jak cofa się tuż przed zmianą krycia.

To jest mój 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; 
} 

To jest mój 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> 

Możesz odtwarzać całość w tym codepen. Mam nadzieję, że ktoś wskaże mi właściwy kierunek.

Answer 1

Oto jedno obejście tylko dla zabawy. Nieco mniej brzydki niż pierwszy, który zasugerowałem. Zmienić kolor tła pudełko krycie: 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); 
} 

Używam rgba aby ustawić przezroczystość tła. Samo ustawienie tła na white również działałoby w tym prostym przypadku.

Answer 2

Jest to oczywiście błąd WebKit. Nie jest to oczywiście sposób zachowania CSS i zachowuje się tak, jak powinien, w Firefoksie, jeśli usuniesz prefiksy dostawcy. Zauważysz, że animacja zostanie zresetowana po zastosowaniu dodatkowych animacji/przejść. Jest to podobne do znanego błędu, który został niedawno naprawiony, w którym wielokrotne przejścia CSS stosowane w różnym czasie powodowały flashowanie układu. Zaleciłbym zgłoszenie błędu zespołowi WebKit, aby można go było naprawić.

Answer 3

Chciałbym rozważyć użycie translate3D na transformacji, aby wymusić akcelerację sprzętową.

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

Wykorzystuje akcelerację sprzętową (GPU) dla przejść CSS.

Answer 4

Ugly obejście, które może, ale nie musi być odpowiednie, w zależności od sytuacji: zamiast ukrywać element (shows the bug) lub pojemnik (also shows the bug), można zanikać na nim element w tle.

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; 
} 

Oczywiście może trzeba bardziej wyrafinowane CSS bardziej wyrafinowany układ, ale mam nadzieję, że masz pomysł.

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