使用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

根据您的具体情况可能适用或不适合的丑陋变通方法：您可以淡入背景色元素，而不是隐藏元素（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，但希望您能够理解。

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转换。