ngAnimate with Angular 1.4 + TypeScript 在页面加载期间不工作

Question

TL;DR

使用 ES5 时，视图在开头淡入(ES5 Example)

使用 Typescript 导入时视图不会淡入(Typescript and ES6 Import Example)

我目前正在尝试使用 Typescript、ES6 模块以及如何集成所有这些技术。在大多数情况下，一切正常。但是，我想用 ngAnimate 为 ui-view 设置动画，问题就来了。不知何故，如果我使用 ES6 模块及其 import 语句，似乎我的依赖项是延迟加载的，因此 ngAnimate 在初始页面加载期间不会工作。页面加载后，动画效果很好，例如如果用户单击 link，则动画进出视图。我想看到的是 ui-view 在开始时淡入。

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

Here 是 ES5 的例子。如果你运行这个 Plunker 你会注意到视图在开始时是如何淡入的。我所做的只是通过 index.html 中的脚本标记包含文件。动画是通过普通 CSS:

完成的

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

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

Here 是 Typescript 示例。您会希望看到不同之处，即视图不会淡入，即使它使用相同的动画机制。这里唯一的区别是我使用的是 Typescript（应该不是问题所在）和通过 import 导入的 ES6 模块。不知何故，如果我使用 import ngAnimate 似乎没有完全加载，或者在页面加载时甚至根本没有加载。也许它是懒加载的？

我真的很想让这个堆栈工作，因为它更加有趣和现代。有什么想法吗？

Answer 1

经过一些调查和 Angular 团队成员之一的帮助，我发现 ngAnimate 默认禁用前两个摘要的所有加载动画。这意味着如果它检测到正在下载任何远程资产，那么它会一直等待直到它们准备就绪。当您使用 Typescript / ES6 模块时，情况就是这样。您可以解决这种情况并保证 bootstrap 上的所有动画运行，即使正在下载远程资产，方法是创建一个指令以启用带有 $animate.enabled(true); 的动画。您可以将指令放在 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.

上淡入

ngAnimate with Angular 1.4 + TypeScript 在页面加载期间不工作

ngAnimate with Angular 1.4 + TypeScript not working during page load

angularjs

typescript

ng-animate

webpack