小编Tat*_*son的帖子

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