我有一个 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]': '' }
})
最佳答案
看起来主要有两个问题:
离开过渡的定义方式与进入过渡相同,但需要不同地定义,以便指定样式用作过渡的“结束”状态而不是“开始”状态。
// 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
),否则它是内联的并且翻译仅适用于 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
关于javascript - Angular2 - 让动画不适用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43399846/