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

你可以在这个codepen中玩完整件事.希望有人可以指出我正确的方向.

解决方法

这里还有一个解决方法,只是为了它的乐趣.比我建议的第一个稍微不那么难看.更改框背景颜色不透明度： 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);
}

我正在使用rgba来设置背景不透明度.只是将背景设置为白色也适用于这种简单的情况.