CSS转换在应用到带有CSS动画的元素后会出现口吃

我正在构建一个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>

切换正方形的不透明度。有时，当不透明度从1过渡到0时，旋转会中断

切换

---

你可以在这里面玩整个游戏。希望有人能给我指出正确的方向。

这显然是一个WebKit bug。这显然不是CSS应有的行为，如果您删除供应商前缀，它的行为与Firefox中的预期一样。您将注意到，当应用其他动画/变换时，动画将重置。这类似于最近修复的一个已知错误，即在不同时间应用多个CSS转换会导致布局闪烁。我建议将错误报告给WebKIT团队，以便它可以被修复。

< P>我会考虑在转换中使用TrimeRe3D来强制硬件加速。

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

---

这使用硬件加速（GPU）进行CSS转换

难看的解决方法，可能适合也可能不适合，具体取决于您的情况：不隐藏元素（）或容器（），您可以在其顶部的背景色元素中淡入淡出

HTML:

显然，您可能需要更复杂的CSS来实现更复杂的布局，但希望您能理解

---

代码笔：

这里还有一个解决方法，只是为了好玩。比我建议的第一个稍微难看一点。更改框的背景色不透明度：

HTML:

---

我正在使用

rgba

设置背景不透明度。在这种简单的情况下，只需将背景设置为白色即可。

这并不能真正回答问题。如果您有不同的问题，可以单击以提问。你也可以把更多的注意力放在这个问题上。@ccjmne这不是一个解决方案，不，但我正试图按照他的要求，为他指明正确的方向。这显然是一个浏览器错误，应该向WebKit团队报告。我不是批评他的问题或要求澄清，我是告诉他他没有做错任何事情，这显然是一个错误，类似于过去已知的错误，应该报告。我已经澄清了我的答案，以防不清楚。我将提出一个webkit项目的错误，并从这里链接回它。谢谢你的建议。我试过（我肯定你也试过）用另一个元素包装正方形，然后隐藏/显示包装，但似乎没有帮助：是的，这对我也不起作用。最后还是用你的答案。丑陋，但天才。幸运的是，目前它包含在一个模板中。如果我需要重用它，我会考虑把它包在一个指令中。谢谢谢谢你，亨里克。将此更改为问题的公认答案，因为它是100%CSS解决方案。如果你可以利用jQuery，你可能需要考虑包装<代码>。第一次更平滑，之后完全平滑。看见

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

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

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

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

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