angular2 组件过渡动画答案

【问题标题】：angular2 component transition animationangular2 组件过渡动画
【发布时间】：2017-11-08 02:31:16
【问题描述】：

angular2如何制作页面过渡动画？

我尝试这是代码但不起作用

@Component({
   selector:'myPagefirstPage', 
})

@View({
   template: `<div  class="view-animate ng-animate" > 
                 <h1>First Page</h1>
              </div>`

我把我的动画类放在这样的css文件中

.view-animate.ng-enter {....}

但它不起作用

【问题讨论】：

我不确定动画是否已经实现，从 alpha 48 开始。无论如何，我假设你必须导入 ANIMATION_DIRECTIVES 或类似的东西才能在给定的情况下使用它们组件

标签： angular angular-animations

【解决方案1】：

从 beta 15 开始，基本转换使用例如.ng-enter 和 .ng-enter-active 有效。请注意，您必须将 ng-animate 类添加到动画元素。有关示例，请参阅此 plunkr http://plnkr.co/edit/WcH3ndMN0HOnK2IwOCev?p=preview

但是，请注意，目前不支持 ng-leave，因为 DOM 节点在输出动画完成之前已被移除（请参阅 https://github.com/angular/angular/pull/6768）

【讨论】：

【解决方案2】：

截至 2015 年 12 月，动画尚未在 Angular 2 测试版中实现，并在最终版本中到期。

http://angularjs.blogspot.com.au/2015/12/angular-2-beta.html

接下来会发生什么？

我们已经在努力进行一系列改进以移动 Angular 2 到其完整和最终版本。虽然我们会做很多小改进，final 的主要改进是：

减小 Angular 2 的负载大小。

使 Angular CLI 在整个开发过程中端到端可用。

为组件路由器创建对开发人员更友好的路由定义和链接 API。

支持动画。

I18n 和 L10n 支持。

编辑：动画现在在 - http://angularjs.blogspot.com.au/2016/06/rc2-now-available.html

RC2 现已推出

今天我们很高兴地宣布，我们正在发布 Angular 2.0.0-rc2。

此版本包括：

动画框架

...

【讨论】：

【解决方案3】：

对于至少使用 Angular 2.0.0-rc2 的用户，我们可以通过添加 div 来在我们的组件之间添加过渡动画（例如淡入淡出），像这样包装我们的组件视图：

<div @fadeIn="'in'">
       ... Component HTML ...
</div>

在你的组件中我们必须设置动画fadeIn：

@Component({
    ...
    animations: [
        trigger('fadeIn', [
            state('*', style({'opacity': '0'})),
            transition('* => in', [animate('800ms linear', style({'opacity': '1'}))])
        ])
    ]

[编辑]不使用状态的另一种方法如下：

<div @fadeIn>
       ... Component HTML ...
</div>

还有组件：

@Component({
    ...
    animations: [
        trigger('fadeIn', [
            state('*', style({'opacity': 1})),
            transition('void => *', [
                style({'opacity': 0}),
                animate('800ms linear')
            ])
        ])
    ]

【讨论】：

【解决方案4】：

Angular 2 最终解决方案

正如@JeanMel 所说，我们可以使用@routeAnimation 内置指令来实现这一点。请参阅我的回答 here，其中包括一个笨蛋。

【讨论】：

【解决方案5】：

对于页面转换，您可以依赖routeAnimation

Animations.ts

import {style, animate, transition, state, trigger} from '@angular/core';

export default [
  trigger('routeAnimation', [
    state('*', style({opacity: 1, height: '100%'})),
    transition('void => *', [
      style({opacity: 0, height: '100%'}),
      animate(200)
    ]),
    transition('* => void', animate(0, style({opacity: 0, height: '100%'})))
  ])
];

然后在你的YourComponent.ts

import animations from './Animations';
@Component({
  ...
  animations: animations
})
export class YourComponent {
  @HostBinding('@routeAnimation') public routeAnimation:void;
  ...
}

可选：假设您的 routing.ts 文件看起来像

import {RouterModule}  from '@angular/router';
import {ModuleWithProviders} from '@angular/core';
import {YourComponent} from './YourComponent';

export const routing:ModuleWithProviders = RouterModule.forChild([
  {path: "aPath", component: YourComponent}
]);

【讨论】：