javascript - 著名的 Angular 动画

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)，这就是当前的旋转状态，因此无处可过渡到。换句话说，Transitionables 不会累积。将 Transitionable 重置回原始状态，然后再次进行 Transition。

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