Angular 4 rc.2 'Renderer.animate()' 方法替换

Question

在 4-rc.2 更改之前，我使用Renderer.animate()方法删除页面加载器(它不是 Angular 应用程序的一部分，并且在加载 angular 之前显示)带有这样的淡入淡出动画

const loaderElement = bodyElement.querySelector(this.loaderSelector);
const loaderFadeOutAnimation = this.renderer.animate(
loaderElement,
{
styles: [ { opacity: 1 } ]
},
[
{
offset: 1,
styles: {
styles: [ { opacity : 0 } ]
}
}
],
300,
0,
'ease'
);
loaderFadeOutAnimation.onDone(() => loaderElement.remove());
loaderFadeOutAnimation.play();

现在如何使用新的渲染器类或其他工具实现这一点？

Answer 1

在撰写本文时，Angular 处于 4.0.0(隐形改造)。

从 4.0 开始不再支持renderer.animate()，因为动画已与@angular/core分离，现在在它们自己的包@angular/animations中。 我已经搜索了自己的答案，但没有找到任何公共 API;但是，有一个未记录的Animation类可能会解决问题。它有一个名为create的私有方法，它将为您提供renderer.animate()用于返回的AnimationPlayer。

您现在可以通过import { ɵAnimation as Animation } from '@angular/animations/browser';访问该类。就像我说的，它是没有文档的，但查看规范可能会暗示你可以利用它。我需要提供AnimationMetadata的情况，所有这些都可以使用Angular Animations DSL使用的相同功能来构建，例如，animate，style等。

综上所述，私有 API 当然可能会发生变化，因此请对这些信息持保留态度。我的猜测是，不久之后，计算动画就会以其他形式返回;这可能只是由于动画被解耦而导致的传递状态。

顺便说一下，Renderer也被弃用。Renderer仍将注入，但移动到Renderer2可能是升级时移动的正确方法。

希望这有帮助！

Answer 2

用角度 4.2+ 求解

import { AnimationBuilder, animate, style } from '@angular/animations';
...
const loaderFadeOutAnimation = this.animationBuilder.build([
style({ opacity: 1 }),
animate(200, style({ opacity: 0 })),
]);
const loaderFadeOutAnimationPlayer = loaderFadeOutAnimation.create(loaderElement);
loaderFadeOutAnimationPlayer.onDone(() => loaderElement.remove());
loaderFadeOutAnimationPlayer.play();