Question

TL; DR

时，视图开始淡入淡出

使用Typescript导入（Typescript and ES6 Import Example）

时，视图不会淡入

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

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

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模块时，这种情况就是这种情况。您可以解决这种情况，并保证所有动画都在引导程序上运行，即使通过创建指令以启用$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。正如您所看到的，动画现在正在淡入淡出。

使用Angular 1.4 + TypeScript的ngAnimate在页面加载期间不起作用

1 个答案: