Знаменитая угловая анимация

Question

В приведенном ниже известном угловом коде анимация работает при первом щелчке, но не при втором щелчке или после него. Какой код отсутствует, чтобы заставить это работать при каждом клике?

Спасибо!

Js

$scope.animate = function(index) {
        $scope.list[index].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 })
    };

HTML

<fa-grid-layout fa-options="myGridLayoutOptions">
    <fa-modifier ng-repeat="item in list"
                 fa-origin="[0.5, 0.5]"
                 fa-align="[0.5, 0.5]"
                 fa-rotate-z="item.rotate.get()">
      <fa-surface fa-background-color="item.bgColor" fa-click="animate($index)">
        {{item.content}}
      </fa-surface>
    </fa-modifier>
  </fa-grid-layout>             

Answer 1

Поскольку вы уже осуществили переход к (Math.PI * 4), теперь это текущее состояние вращения, поэтому переходить некуда. Другими словами, переходные периоды не накапливаются. Верните Transitionable обратно в исходное состояние, затем снова перейдите.

$scope.animate = function(index) {
    $scope.list[index].rotate.set(0);
    $scope.list[index].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 })
};