0

我试图在加载时让图标动画，并在加载完成后停止动画。我试图通过激活一个基于刷新属性的类来实现这一点。这在 AngularJS 1.2.0-rc.3 中有效，但是现在（已经尝试过 1.2.3 和 1.2.4）动画永远不会停止，我相信原因是添加的 -add 类在绑定时没有被删除变量更改为假。

这是plunker演示。

http://plnkr.co/edit/fbcCPxwZtcIoS0ZqrHhf?p=preview

有趣的是，更多的变量切换最终会停止动画。我想做的是否有效，我想我总是可以只显示隐藏加载 gif，但我喜欢为现有图像设置动画的想法

谢谢！生硬

4

1 回答 1

1

问题出在你的 CSS 中。

你不需要'.icon-refresh-animate-add'。

使用这个 CSS 类：

.icon-refresh-animate {
  animation-name: rotateThis;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: rotateThis;
  -moz-animation-name: rotateThis;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
}

这是您的动画添加的副本。

说明： ngClass 正在打开和关闭 .icon-refresh-animate 类。因此，当状态为真时，应用类并且动画永远循环。当状态为 false 时，css 类被删除，因此根本没有动画。所以这段代码为你完成了所有的工作

ng-class="{'icon-refresh-animate':refreshing}"

这是完整的 CSS：

@keyframes rotateThis {
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1) rotate(360deg);
  }
}
@-webkit-keyframes rotateThis {
  from {
    -webkit-transform: scale(1) rotate(0deg);
  }
  to {
    -webkit-transform: scale(1) rotate(360deg);
  }
}

.icon-refresh-animate {
  animation-name: rotateThis;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: rotateThis;
  -moz-animation-name: rotateThis;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
}
于 2013-12-10T18:59:32.930 回答