Question

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

我试试这是代码但没有工作

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

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

我将动画类放在css文件中，就像这样

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

但它不起作用

Answer 1

截至2015年12月，动画未在Angular 2测试版中实施，并将在最终版本中发布。

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

接下来会发生什么？

我们已经在努力改进Angular的一系列改进   2完整和最终发布。虽然我们会做很多小事   改进，最后的决定是：


减少Angular 2的有效负载大小。

在整个开发过程中使Angular CLI可以端到端地结束。

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

支持动画。

I18n和L10n支持。

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

RC2现已可用

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

此版本包括：


动画框架

...

Answer 2

从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）

Answer 3

对于那些至少使用Angular 2.0.0-rc2的人，我们可以在组件之间添加一个过渡动画（例如fadeIn），方法是添加一个div来包装我们的组件视图：

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

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

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

[EDIT]不使用状态的替代方法如下：

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

组件：

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

Answer 4

Angular 2最终解决方案

正如@JeanMel所述，我们可以使用@routeAnimation内置指令来实现这一目标。请参阅我的回答here，其中包含一个插件。

Answer 5

对于页面转换，您可以依赖user = models.OneToOneField(User, on_delete=models.CASCADE, primary_key=True)

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

angular2组件过渡动画

5 个答案:

接下来会发生什么？

RC2现已可用