angularjs - 在页面加载期间，Angular 1.4 + TypeScript 的 ngAnimate 无法工作

概况

在使用 ES5 时（ES5 示例），视图在开始时正在淡入

使用 Typescript 导入时视图不会淡入（Typescript 和 ES6 导入示例）

我目前正在尝试使用 TypeScript、ES6 模块以及如何整合所有这些技术。在大多数情况下，一切都运行良好。然而，我想用 ngAnimate 来为 ui-view 添加动画，这就出现了问题。不知为何，如果我使用 ES6 模块及其 import 语句，似乎我的依赖会被懒加载，因此 ngAnimate 在初始页面加载时无法工作。一旦页面加载完成，动画就能正常运行，例如用户点击链接时视图会进出动画。我希望实现的是 ui-view 在开始时淡入的效果。

我已设置了两个 Plunker 来演示一个使用普通 ES5 的应用程序和一个使用 Typescript 的应用程序的行为，Typescript 应用程序使用 SystemJS 和 import 语句来加载其依赖项。

这是 ES5 示例。如果你运行这个 Plunker，你会注意到视图在开始时是如何渐显的。我所做的只是通过 index.html 中的 script 标签包含这些文件。动画是通过普通的 CSS 完成的：

ui-view.ng-enter {
  animation: fadeIn .5s ease both;
  animation-delay: .3s;
}

ui-view.ng-leave {
  animation: fadeOut .5s ease both;
}

这是 Typescript 示例。你希望能够看到区别，即使它使用相同的动画机制，视图也不会淡入。这里唯一的区别是我使用了 Typescript（应该不是问题）和通过 import 导入的 ES6 模块。似乎在我使用 import 时，ngAnimate 在页面加载时并没有完全加载，甚至可能根本没有加载。也许它是懒加载的？

我真的很想让这个技术栈工作起来，因为它更有趣、更现代。有什么想法吗？

答案＃1

经过一些调查以及一位 Angular 团队成员的帮助后，我发现 ngAnimate 默认情况下在加载时会禁用前两个 digest 的所有动画。这意味着如果它检测到任何远程资源正在下载，则会一直等待直到它们准备好。当你使用 TypeScript/ES6 模块时，情况就是如此。你可以通过创建一个指令来启用动画（使用 $animate.enabled(true);），从而解决这一情况并保证即使在远程资源被下载时，所有动画仍然会在 bootstrap 时运行。你可以将该指令放在 body 或 html 标签上。在上面的 Plunker 示例中，我已经将指令添加到 body 标签上。这就是你需要的内容：

<body allow-animations-on-load>
  <ui-view></ui-view>
</body>

app.directive('allowAnimationsOnLoad', ['$animate', function($animate) {
  $animate.enabled(true);
}]);

我也更新了相应的 Plunker。如你所见，动画现在在 bootstrap 上逐渐显示。