Angular2 - 让动画不适用

Question

我有一个 Angular2 应用程序，我正在尝试向我的路由添加动画，以便它在我更改页面时滑动。进入动画效果很好，但是离开动画没有激活，加载新页面后上一页就消失了。有谁知道这个问题的原因？ plunker

根据 anuglar2 docs，我认为我的转换是正确的。

// 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

看来主要有两个问题：

离开过渡的定义方式与进入过渡相同，但需要不同地定义，以便指定样式用作 'end' 状态而不是 'start' 过渡状态。

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

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

您需要在主机上安装 display:block（或 inline-block），否则它是内联的并且翻译仅适用于块。

// Instead of
host: { '[@routerTransition]': '' }

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

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

这是 angular 人的另一个例子：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

注意： 在Angular4中，动画已经从@angular/core中拉出并放入包中，可以让你更轻松找到文档并更好地利用自动完成功能。

Angular2 - 让动画不适用

Angular2 - leaving animation not applying

javascript

animation

angular2-routing

angular