应用到带有 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

这里还有另一种解决方法，只是为了好玩。比我建议的第一个要丑一些。更改框背景颜色不透明度：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 2

这显然是一个 WebKit 错误。这显然不是 CSS 的行为方式，如果您删除供应商前缀，它在 Firefox 中的行为确实符合预期。您会注意到，当应用额外的动画/过渡时，动画会重置。这类似于最近修复的一个已知错误，在该错误中，在不同时间应用多个 CSS 过渡会导致布局闪烁。我建议将错误报告给 WebKit 团队以便修复。

Answer 3

丑陋的解决方法可能适合也可能不适合，具体取决于您的情况：您可以在其顶部淡入背景色元素，而不是隐藏元素 (shows the bug) 或容器 (also shows the bug) .

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 来实现更复杂的布局，但希望您能理解。

代码笔：http://codepen.io/anon/pen/IwBHj

Answer 4

我会考虑在变换上使用 translate3D 来强制硬件加速。

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

这使用硬件加速 (GPU) 进行 CSS 过渡。