递归触发 $animate.addClass 动画答案

【问题标题】：Recursively trigger $animate.addClass animations递归触发 $animate.addClass 动画
【发布时间】：2015-11-22 04:32:19
【问题描述】：

您好，我正在尝试为我的项目设置循环动画。我正在尝试使用 $animate 设置递归触发的动画。在我的一个指令的链接函数中看起来像这样：

            function startLoopAnimation(count) {
              if(loopSkip === false) {

                animateLoop().then(function() {
                  count--;                 
                  if(count > 0) {
                    startLoopAnimation(count);
                  }
                });
              }

              function animateLoop() {
                return $animate.addClass(element,
                    'wobble ' +
                    'linear' +
                    ' duration-' + scope.config.animation.loop.duration * 10
                );
              }
            }

函数被调用，但动画从未被第二次触发。设置这样的异步触发动画的最佳方法是什么？

这也必须适用于 android 上的旧版本，因此性能是关键。此外，不能选择使用“无限”动画迭代计数。

更新：我为这个特定案例提供了我的解决方案，但是我仍然想知道为什么这不起作用以及如何使它起作用。

【问题讨论】：

标签： angularjs css ng-animate animate.css

【解决方案1】：

我设法通过简化代码来修复我的代码。只要我可以访问应该有的循环迭代量（我这样做），我就可以设置“animation-iteration-count”来循环动画正确的次数。

function animateLoop(loopCount) {
            return $animate.addClass(element,
                scope.config.animation.loop.animation + ' ' +
                scope.config.animation.loop.timingFunction +
                ' duration-' +
                scope.config.animation.loop.duration * 10 +
                    ' iteration-count-' + loopCount
            );
          }

我还使用了 LESS 循环来生成迭代类（就像我使用持续时间一样）：

.iterationLoop(@counter: 100) when (@counter > 0) {
  .iteration-count-@{counter} {
    -webkit-animation-iteration-count: @counter;
    animation-iteration-count: @counter;
  }

  .iterationLoop((@counter - 1));

}

.iterationLoop();

【讨论】：