7

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

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

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

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

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

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

但它不起作用

4

5 回答 5

4

从 beta 15 开始，使用 eg.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）

于 2016-04-26T12:30:05.513 回答
4

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

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

接下来是什么？

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

  1. 减少 Angular 2 的有效载荷大小。
  2. 使 Angular CLI 在整个开发过程中端到端可用。
  3. 为组件路由器创建对开发人员更友好的路由定义和链接 API。
  4. 支持动画。
  5. I18n 和 L10n 支持。

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

RC2 现已推出

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

此版本包括：

  1. 动画框架

...

于 2016-01-25T05:27:24.703 回答
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')
            ])
        ])
    ]
于 2016-08-23T09:30:40.657 回答
1

Angular 2 最终解决方案

正如@JeanMel 所说，我们可以使用@routeAnimation内置指令来实现这一点。请在此处查看我的答案，其中包括一个笨拙的答案。

于 2016-10-17T00:54:54.970 回答
0

对于页面转换，您可以依赖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}
]);
于 2016-09-11T09:40:49.797 回答