我做了一个非常简单的动画:点击一个div,它应该折叠/展开并显示不同的内容。
我嘲笑了这里的行为:https://stackblitz.com/edit/animations-opacity-issue?file=src/app/app.component.ts
当你点击div时,它会按预期折叠,但是蓝绿色div应该淡出,而深红色div应该淡入。
目前都没有工作,我不知道为什么。
import { Component } from '@angular/core';
import { animate, query, state, style, transition, trigger } from '@angular/animations';
@Component({
selector: 'my-app',
template: `
<div class="menu-container" [@menuSize]="isMenuExpanded" (click)="isMenuExpanded = !isMenuExpanded">
<div style="background-color: teal" *ngIf="isMenuExpanded" @menuVisibility></div>
<div style="background-color: crimson" *ngIf="!isMenuExpanded" @menuVisibility></div>
</div>
`,
styles: [`
.menu-container {
height: 100%;
background: coral;
width: 300px;
position: relative;
}
.menu-container div {
height: 200px;
width: 100%;
position: absolute;
}
`],
animations: [
trigger('menuSize', [
state('true', style({ width: '*' })),
state('false', style({ width: '100px' })),
transition('true <=> false', [
animate('500ms ease-in-out'),
]),
]),
trigger('menuVisibility', [
state('*', style({ opacity: '1' })),
state('void', style({ opacity: '0' })),
transition(':enter', [animate('300ms ease-in-out')]),
transition(':leave', [animate('300ms 500ms ease-in-out')])
])
],
})
export class AppComponent {
isMenuExpanded = true;
}
你必须使用animateChild
(https://angular.io/api/animations/animateChild),因此在相同的关键帧中进行动画处理
animateChild
在动画序列中执行查询的内部动画元素。
和group
(https://angular.io/api/animations/group)你的动画,所以他们同时被执行
组
定义要并行运行的动画步骤列表。
码:
transition('true <=> false', group([
query('@menuVisibility', [
animateChild()
], {optional: true}),
animate('3s'),
]))
以下是您的示例,其中包含以下更改:qazxsw poi:
https://stackblitz.com/edit/animations-opacity-issue-exycbu
在这个注释中,我在github中发现了一些处理嵌套动画的错误:
import { Component } from '@angular/core';
import { animate, query, state, style, transition, trigger, animateChild, group } from '@angular/animations';
@Component({
selector: 'my-app',
template: `
<div class="menu-container" [@menuSize]="isMenuExpanded" (click)="isMenuExpanded = !isMenuExpanded">
<div style="background-color: teal" *ngIf="isMenuExpanded" @menuVisibility>teal</div>
<div style="background-color: crimson" *ngIf="!isMenuExpanded" @menuVisibility>crimson</div>
</div>
`,
styles: [`
.menu-container {
height: 100%;
background: coral;
width: 300px;
position: relative;
}
.menu-container div {
height: 200px;
width: 100%;
position: absolute;
}
`],
animations: [
trigger('menuSize', [
state('true', style({ width: '300px' })),
state('false', style({ width: '100px' })),
transition('true <=> false', group([
query('@menuVisibility', [
animateChild()
], {optional: true}),
animate('3s'),
]))
]),
trigger('menuVisibility', [
state('*', style({ opacity: '1' })),
state('void', style({ opacity: '0' })),
transition(':enter', [animate('3s')]),
transition(':leave', [animate('3s')])
])
],
})
export class AppComponent {
isMenuExpanded = true;
}
所以它接缝,动画的嵌套与相同的触发器是错误的。
我从这里得到了灵感:qazxsw poi和这里:qazxsw poi
总而言之,这是一个痛苦....