使用 AngularJS $animate 服务触发 JS 定义的动画

Question

我通过指令手动触发动画 - 它工作正常。

element.bind('click', function() {
  $animate.addClass(element, 'my-animation');
});

.animation('.my-animation', function() {
    return {
        addClass: function(element) {
            element.html('<span>Animating</span>');
        }
    }
})

这是 AngularJS 1.2.8 中的一个简单的独立工作示例： http://plnkr.co/edit/5h5LbkqeL7i38NHSzisq?p=preview

但是如果我将 Angular 版本更改为 1.3+，动画将不再触发。我意识到 $animate 服务已经过大修并尝试了各种方法 $animate.animate() 等

这是在 1.3.8 中失败的相同示例： http://plnkr.co/edit/eTB1nmQLcO3nkpbaedqt?p=preview

这是一个错误吗？我傻吗？帮助赞赏:)

Answer 1

这是由于 1.3.0-RC.0 在 $animate 服务开始使用承诺而不是动画回调时引入的重大更改。

changelog 的一些摘录：

Both the API for the cancallation method and the done callback for $animate animations is different. Instead of using a callback function for each of the $animate animation methods, a promise is used instead.

...

keep in mind that you will still need to run $scope.$apply inside of the then callback to trigger a digest.

...

$animate.addClass, $animate.removeClass and $animate.setClass will no longer start the animation right after being called in the directive code. The animation will only commence once a digest has passed. This means that all animation-related testing code requires an extra digest to kick off the animation.

由于 bind 是一种 jQuery/jqLite 方法，它不会像 ng-click 那样自动触发摘要循环。

要解决您的问题，只需将代码包装在对 $apply:

的附加事件处理程序中

element.bind('click', function() {
  scope.$apply(function() {
    $animate.addClass(element, 'my-animation');
  });
});

演示： http://plnkr.co/edit/KTJs71WDLL4OXYmKTaYV?p=preview

使用 AngularJS $animate 服务触发 JS 定义的动画

Using AngularJS $animate service to trigger JS defined animations

angularjs

ng-animate