Question

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

这是羽毛球员的演示。

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

有趣的是，变量的更多切换最终会停止动画。我试图做的是有效的，我想我总是可以隐藏一个加载的GIF，但我喜欢动画现有图像的想法

谢谢！简略的

Answer 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类。所以当状态为true时，应用类并且动画永远循环。当状态为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;
}

ng-Animate不会删除添加类角度1.2.x

1 个答案: