Question

我使用Angular 1.3.1，ngAnimate进行CSS转换。我想知道CSS转换何时开始并完成。

我原本希望能够使用module.animation，但它不能像我预期的那样（和文档建议的那样）。转换完成后，我无法收到通知。

我创建了一个Plunker：http://plnkr.co/edit/UGCmbBoiLT1xvhx7JGst。

这是我的HTML代码：

<body ng-controller="Controller as ctrl">
<h1>Angular Animation issue!</h1>
<div class="animation" id="resizeme" ng-class="ctrl.className"></div>
<label>
  <input type="checkbox" ng-model="ctrl.className"
         ng-true-value="'big'" ng-false-value="''">
  Bigger!
</label>

这是CSS代码：

#resizeme {
  width: 100px;
  height: 100px;
  background-color: red;
  -webkit-transition: width linear 1s;
  transition: width linear 1s;
}
#resizeme.big {
  width: 200px;
}

这是JavaScript代码：

var module = angular.module('app', ['ngAnimate']);

module.controller('Controller', function() {
  this.className = '';
});

module.animation('.animation', function() {
  return {
    addClass: function(elemennt, className) {
      console.log('addClass animation starts');
      return function(cancel) {
        console.log('addClass animation completes')
      }
    },
    removeClass:  function(elemennt, className) {
      console.log('removeClass animation starts');
      return function(cancel) {
        console.log('removeClass animation completes')
      }
    },
  }
});

选中该复选框可运行“addClass”动画。我在控制台中获得了“addClass animation starts”消息，但是当转换完成时，我没有收到“addClass animation completed”消息。

ngAnimate个文档的Javascript-defined Animations部分针对enter，addClass和朋友返回的函数说明以下内容：

//this (optional) function will be called when the animation
//completes or when the animation is cancelled (the cancelled
//flag will be set to true if cancelled).

所以我希望在转换完成时调用输出“addClass animation completed”的函数。但它没有被召集。

有人知道如何在转换完成后收到通知吗？

PS：我知道我可以使用$animate服务和$animate.addClass返回的承诺。但我正在尝试使用ng-class（以及其他与动画兼容的Angular指令），因此我无法访问$animate服务提供的承诺。

转换完成时的通知

0 个答案: