Angularjs $animate 承诺 css 关键帧动画

Question

根据angular docs（强调我的）：

在 AngularJS 1.3 中，$animate 服务上的每个动画方法在调用时都会返回一个 Promise。然后，promise 本身在动画完成后自动解析、被取消或由于动画被禁用而被跳过。

虽然$animate 正在返回一个承诺，但它似乎会立即解决。

为了演示，我创建了一个简单的example in codepen

这是相关的脚本（点击时）：

$elem = angular.element('<div class="donkey">Not resolved</div>')

$animate.enter($elem, element).then(
  $elem.html('My promise is resolved!') 
)

和风格：

.donkey
  &.ng-enter
    animation(2s,slide)

@keyframes slide
  from
    transform translateX(20rem)
    opacity 0
  to
    transform translateX(0)
    opacity 1

预期：

单击按钮时，元素应添加到 DOM，然后应滑动到带有文本 Not resolved 的视图中。 动画结束后文本应更新为My promise is resolved。

实际：

元素被添加到 DOM 中，动画成功触发，但 promise 立即解析，因此在动画执行时文本显示为 My promise is resolved。

我做错了什么？你能在这个工作的地方创建一个 plunker 的分支（不使用$timeout 或类似的东西）吗？

Answer 1

你当前的 CoffeeScript 编译成这样：

return scope.enter = function() {
  var $elem;
  $elem = angular.element('<div class="donkey">Not resolved</div>');
  return $animate.enter($elem, element).then($elem.html('My promise is resolved!'));
};

请注意，它不是传递给then 的函数，而是$elem.html('My promise is resolved!') 的即时执行结果。由于它会立即执行，因此 HTML 会在 promise 解决之前发生变化。

应该是：

$animate.enter($elem, element).then(->
  $elem.html('My promise is resolved!')
)

最后一部分将编译为：

return $animate.enter($elem, element).then(function() {
  return $elem.html('My promise is resolved!');
});

如果您不想在编译后的代码中出现return：

$animate.enter($elem, element).then(->
  $elem.html('My promise is resolved!')
  return
)

演示： http://codepen.io/anon/pen/OPJpzV