Рекурсивно запускать анимацию $ animate.addClass

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, поэтому производительность является ключевой. Кроме того, использование бесконечного числа анимации-итерации не является вариантом.

ОБНОВЛЕНИЕ: Я представил свое решение для этого конкретного случая, однако мне все равно хотелось бы знать, почему это не сработало и как я мог заставить его работать.

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 
      ); 
      } 

Я также использовал МЕНЬШЕ цикл для создания классов итерации (так же, как у меня с длительностью):

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

    .iterationLoop((@counter - 1)); 

} 

.iterationLoop();