我有一个扩展/收缩的容器.容器内部有一个元素,当容器膨胀时应该淡入,当容器收缩时应该淡出.
我的问题
>当容器展开时,两个元素的动画都有效.
>当容器缩小时,只有容器动画才有效.
>如果我删除容器扩展动画,则淡入/淡出动画将按预期工作.
如何在扩展/收缩条件下并行执行所有动画？
注意使用ngIf.这是故意的,因为它会破坏动画序列末尾的元素.
这是我目前状态的一个吸引人：
https://embed.plnkr.co/TXYoGf9QpErWmlRvQF9Z/
组件类：
export class App {
expanded = true;
toggleExpandedState() {
this.expanded = !this.expanded;
}
constructor() {
}
}
模板：
<div class="container" [@expansionTrigger]="expanded"> <div class="constant-item"></div> <div class="fade-item" [@stateAnimation] *ngIf="expanded"></div> </div> <button (click)="toggleExpandedState()">Toggle Fade</button>
和组件动画：
trigger('expansionTrigger',[
state('1',style({
width: '250px'
})),state('0',style({
width: '160px'
})),transition('0 => 1',animate('200ms ease-in')),transition('1 => 0',animate('200ms ease-out'))
]),trigger('stateAnimation',[
transition(':enter',[
style({
opacity: 0
}),animate('200ms 350ms ease-in',style({
opacity: 1
}))
]),transition(':leave',[
style({
opacity: 1
})
animate('1s',style({
opacity: 0
}))
])
])
这是你需要做的：
plnkr这里：https://plnkr.co/edit/AQEVh3GGc31ivQZMp223?p=preview
remove * ngIf =“expanded”use [@stateAnimation] =“expanded”
用这个替换你的stateAnimate触发器：
trigger('stateAnimation',[
state('1',style({ opacity: 0 })),style({opacity: 1})),animate('200ms ease-out'))
])
这是完整的代码：
//our root app component
import {Component,NgModule,VERSION,Output,trigger,state,style,transition,animate,} from '@angular/core'
import {browserModule} from '@angular/platform-browser'
import { browserAnimationsModule } from '@angular/platform-browser/animations';
@Component({
selector: 'my-app',template: `
<div class="container" [@expansionTrigger]="expanded">
<div class="constant-item"></div>
<div class="fade-item" [@stateAnimation]="expanded"></div>
</div>
<button (click)="toggleExpandedState()">Toggle Fade</button>
`,animations: [
trigger('expansionTrigger',[
state('1',style({ width: '250px' })),style({width:'160px'})),animate('200ms ease-out'))
]),animate('200ms ease-out'))
])
]
})
export class App {
expanded = true;
toggleExpandedState() {
this.expanded = !this.expanded;
}
constructor() {
}
}
@NgModule({
imports: [ browserModule,browserAnimationsModule ],declarations: [ App ],bootstrap: [ App ]
})
export class AppModule {}