Question

您好我正在尝试为我的项目设置循环动画。我正在尝试使用$ 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上的旧版本，因此性能是关键。此外，使用＆＃39;无限＆＃39; animation-iteration-count不是一个选项。

更新：我为这个具体案例提供了我的解决方案，但是我仍然想知道为什么这样做不起作用以及我如何才能使它发挥作用。

Answer 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();

递归触发$ animate.addClass动画

1 个答案: