使用CSS動畫應用於元素后，CSS過渡斷斷續續

Question

我正在構建一個AngularJS應用程序，通過轉換其不透明度來顯示和隱藏元素。 通過應用CSS關鍵幀動畫也可以旋轉元素。 我遇到的問題是過渡或動畫口吃。

當元素的不透明度為1且轉換將其淡出為0時，該元素似乎會返回幾幀。 這在GIF中得到了更好的證明。 你可以看到它在不透明度變化之前跳回來。

這是我的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;  
}

這是我的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>

你可以在這個codepen中玩全部的東西。 希望有人能指出我正確的方向。

Answer 1

這顯然是一個WebKit錯誤。 這顯然不是CSS的行為方式，如果刪除供應商前綴，它在Firefox中的行為與預期的一樣。 您會注意到，當應用其他動畫/過渡時，動畫會重置。 這類似於最近修復的已知錯誤，其中在不同時間應用的多個CSS轉換將導致布局閃存。 我建議將錯誤報告給WebKit團隊，以便修復它。

Answer 2

根據您的具體情況，可能適用或不適合的丑陋變通方法：您可以在其上方淡入背景色元素，而不是隱藏元素（ 顯示錯誤 ）或容器（ 也顯示錯誤 ）。

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

顯然，你可能需要更復雜的CSS來實現更復雜的布局，但希望你能得到這個想法。

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

Answer 3

這里還有一個解決方法，只是為了它的樂趣。 比我建議的第一個稍微不那么難看。 更改框背景顏色不透明度： 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);
}

我正在使用rgba來設置背景不透明度。 只是將背景設置為white也適用於這種簡單的情況。

Answer 4

我會考慮在轉換上使用translate3D來強制硬件加速。

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

這使用硬件加速（GPU）進行CSS轉換。