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();

现在如何使用新的渲染器 class 或其他工具来实现？

Answer 1

在撰写本文时，Angular 为 4.0.0（隐形改造）。

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

的 AnimationPlayer

您现在可以通过 import { ɵAnimation as Animation } from '@angular/animations/browser'; 访问 class。就像我说的，它没有记录，但查看 at the spec 可能会暗示您可以使用它的某种方式。在需要提供 AnimationMetadata 的情况下，所有这些都可以使用 Angular Animations DSL 使用的相同函数构建，例如 animate、style 等。

综上所述，私有 API 当然会发生变化，因此请对这些信息持保留态度。我的猜测是用不了多久就会有其他形式的计算动画 return；由于动画被解耦，这可能只是一个传递状态。

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

希望对您有所帮助！

Answer 2

用angular4.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();

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

Angular 4 rc.2 `Renderer.animate()` method replacement

angular4

angular