Angular2 - 让动画不适用

Question

我有一个Angular2应用程序,我正在尝试向我的路由添加动画,因此当我更改页面时它会滑动.输入动画工作正常,但离开动画未激活,上一页在加载新页面后消失.有谁知道这个问题的原因？ plunker

根据anuglar2文档,我认为我的过渡是正确的.

// transition(':enter', [ ... ]); // void => *
// transition(':leave', [ ... ]); // * => void

动画文件

export function routerTransition() {
    return trigger('routerTransition', [
        transition('void => *', [
            style({ transform: 'translateX(100%)' }),
            animate(1000)
        ]),
        transition('* => void', [
            style({ transform: 'translateX(-100%)' }),
            animate(1000)
        ])
    ])
}

child_1.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { routerTransition } from '../../directives/router.animation'; 
@Component({
    selector: 'about',
    template: require('./about.component.html'),
    styles: [require('./about.component.css')],
    animations: [routerTransition()],
    host: { '[@routerTransition]': '' }
})

child_2.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { routerTransition } from '../../directives/router.animation'; 
@Component({
    selector: 'home-info',
    template: require('./home.component.html'),
    styles: [require('./home.component.css')],
    animations: [routerTransition()],
    host: { '[@routerTransition]': '' }
})

Answer 1

看起来有两个主要问题:

1. 离开转换的定义方式与进入转换的方式相同,但需要对其进行不同的定义,以便将指定的样式用作"结束"状态而不是转换的"开始"状态.

   // Instead of
   transition('* => void', [
       style({ transform: 'translateX(-100%)' }),
       animate(1000)
   ])
   
   // Use
   transition('* => void', 
        animate(1000, style({transform: 'translateX(-100%)', opacity: 0}))
   )
   

2. 你需要在主机上拥有display:block(或inline-block),否则它是内联的,而翻译只适用于块.

   // Instead of
   host: { '[@routerTransition]': '' }
   
   // Use
   host: {
      '[@routerTransition]': 'true',
      '[style.display]': "'block'",
   },
   

虽然动画可能不是你想要的,但至少它是一个或多或少的工作起点:https: //plnkr.co/edit/eFrjtTOtXkWp8IUeAYdo？p = preview

以下是角色人物的另一个例子:http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY？p = preview

Answer 2

我认为你应该更改动画代码如下：

export function routerTransition() {
    return trigger('routerTransition', [
        state('void', style({position:'fixed', width:'100%'}) ),
        state('*', style({position:'fixed', width:'100%'}) ),
        transition('void => *', [
          style({transform: 'translateX(-100%)'}),
          animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
        ]),
        transition('* => void', [
          style({transform: 'translateX(0%)'}),
          animate('0.5s ease-in-out', style({transform: 'translateX(100%)'}))
        ])
    ])
}

这是一个示例Plunk

注意： 在 Angular 4 中，动画已从 @angular/core 中取出并放入包中，以便您可以更轻松地查找文档并更好地利用自动完成功能。