将 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 即可。