gpt4 book ai didi

Angular 2 : How do you run 2 animations in parallel?

转载 作者:太空狗 更新时间:2023-10-29 17:10:33 25 4
gpt4 key购买 nike

我有一个可以扩展/收缩的容器。该容器内有一个元素,它应该在容器扩展时淡入,在容器收缩时淡出。

我的问题

  • 当容器展开时,两个元素的动画都起作用。
  • 当容器收缩时,只有容器动画起作用。
  • 如果我删除容器展开动画,淡入/淡出动画将按预期工作。

如何让所有动画在展开/收缩条件下并行执行?

注意 ngIf 的使用。这是故意的,因为它会在动画序列结束时破坏元素。

这是我目前状态的一个plunkr: 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
}))
])
])

最佳答案

为了避免其他人的挫败感,它看起来像是 Angular 4 的一个错误。

目前在 Github 上有两个似乎密切相关的未解决问题:

https://github.com/angular/angular/issues/15798

https://github.com/angular/angular/issues/15753

更新

根据 github 问题,动画错误不会像 Angular2 中那样被修复。而是引入了 query()animateChild()。新的动画功能从 4.2.0-rc2 开始可用。

总结:

组件定义

@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<button (click)="toggle()">Toggle</button>
<div *ngIf="show" @ngIfAnimation>
<h3 @easeInOut>I'm inside ngIf</h3>
</div>
</div>
`,
animations: [
trigger('ngIfAnimation', [
transition(':enter, :leave', [
query('@*', animateChild())
])
])
trigger('easeInOut', [
transition('void => *', [
style({
opacity: 0
}),
animate("1s ease-in-out", style({
opacity: 1
}))
]),
transition('* => void', [
style({
opacity: 1
}),
animate("1s ease-in-out", style({
opacity: 0
}))
])
])
]]

})
export class App {
name:string;
show:boolean = false;

constructor() {
this.name = `Angular! v${VERSION.full}`
}

toggle() {
this.show = !this.show;
}
}

这里有一个可用的示例:https://embed.plnkr.co/RJgAunJfibBKNFt0DCZS/

关于 Angular 2 : How do you run 2 animations in parallel?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43170827/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com