Angular 4 rc.2`Renderer.animate（）`方法替换

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

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

在撰写本文时，Angular的版本是4.0.0（隐形改造）

renderer.animate（）

从4.0开始不再受支持，因为动画已从

@angular/core

解耦，现在已在其自己的包

@angular/animations

中。我一直在寻找答案，但没有找到任何公共API；然而，有一种未经记录的方法可能会奏效。它有一个名为

create

的私有方法，该方法将为您提供用于返回的

AnimationPlayer

您现在可以通过“@angular/animations/browser”的

import{ɵAnimation as Animation}访问该类。就像我说的，它是没有文档记录的，但是查看可能会暗示您可以使用它的某种方式。I在需要提供AnimationMetadata的情况下，所有这些都可以使用角度动画DSL使用的相同功能构建，例如，
animate
，
style
，等等

说到以上，私有API当然会有变化，所以请对这些信息持保留态度。我的猜测是，不久计算机动画就会以其他形式出现；由于动画被解耦，这可能只是一种过渡状态

顺便提一下，
渲染器
也不推荐使用<代码>渲染器

仍将被注入，但在升级时移动到

渲染器2

可能是正确的移动方式

希望这有帮助

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

renderer.animate（）

从4.0开始不再受支持，因为动画已从

@angular/core

解耦，现在已在其自己的包

@angular/animations

中。我一直在寻找答案，但没有找到任何公共API；然而，有一种未经记录的方法可能会奏效。它有一个名为

create

的私有方法，该方法将为您提供用于返回的

AnimationPlayer

您现在可以通过“@angular/animations/browser”的

import{ɵAnimation as Animation}访问该类。就像我说的，它是没有文档记录的，但是查看可能会暗示您可以使用它的某种方式。I在需要提供AnimationMetadata的情况下，所有这些都可以使用角度动画DSL使用的相同功能构建，例如，
animate
，
style
，等等

说到以上，私有API当然会有变化，所以请对这些信息持保留态度。我的猜测是，不久计算机动画就会以其他形式出现；由于动画被解耦，这可能只是一种过渡状态

顺便提一下，
渲染器
也不推荐使用<代码>渲染器

仍将被注入，但在升级时移动到

渲染器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();

---

它是用角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();