Question

根据angular docs（强调我的）：

使用AngularJS 1.3时，$ animate服务上的每个动画方法在调用时都会返回一个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中，并且动画成功触发，但承诺立即解析，因此文本在动画执行时会显示My promise is resolved。

我做错了什么？你可以在这里使用（{1}}或类似的）创建一个plunker的分叉吗？

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将在承诺解决之前发生变化。

应该是：

$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

Angularjs $ animate承诺css关键帧动画

预期：

实际：

1 个答案: