动画：不透明度属性未应用

Question

我制作了一个非常简单的动画：点击 div，它应该 collapse/expand 并显示不同的内容。

我嘲笑了这里的行为：https://stackblitz.com/edit/animations-opacity-issue?file=src/app/app.component.ts

当您单击 div 时，它会按预期折叠，但蓝绿色 div 应该淡出，而深红色 div 应该淡入。

目前none工作，我不知道为什么。

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;
}

Answer 1

您必须使用 animateChild (https://angular.io/api/animations/animateChild)，因此在相同的关键帧中设置动画

animateChild

Executes a queried inner animation element within an animation sequence.

和group（https://angular.io/api/animations/group）你的动画，所以它们是同时执行的

group

Defines a list of animation steps to be run in parallel.

代码：

 transition('true <=> false', group([
        query('@menuVisibility', [
          animateChild()
        ], {optional: true}),        
        animate('3s'),
      ]))

这是您的示例，带有 cahgnes：https://stackblitz.com/edit/animations-opacity-issue-exycbu:

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;
}

在这篇文章中，我在 github 中发现了一些处理嵌套动画的错误：

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

所以它接缝，具有相同触发器的动画嵌套是错误的。

我从这里得到灵感：https://docs.w3cub.com/angular/api/animations/animatechild/ and here:

总而言之，这很痛苦....

动画：不透明度属性未应用

Animations: opacity property not being applied

css

animation

angular

angular-animations

动画：不透明度 属性 未应用

Animations: opacity property not being applied

css

animation

angular

angular-animations

动画：不透明度属性未应用