1

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

现在如何使用新的 Renderer 类或其他工具来实现这一点？

4

2 回答 2

0

用 angular 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();
于 2017-07-03T12:45:42.207 回答
0

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

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

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

综上所述，私有 API 可能会发生变化，当然，因此请谨慎对待这些信息。我的猜测是，计算动画很快就会以其他形式返回。由于动画被解耦，这可能只是一个过渡状态。

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

希望这可以帮助！

于 2017-03-26T02:56:08.737 回答