Angular 18 动画 - 状态更改有效，但没有转换

Question

我想在 Angular 18 中实现我的第一个动画。
状态更改有效，但我没有得到过渡动画。

组件 TS / @Component > 动画：

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-main',
  standalone: true,
  imports: [ChannelComponent, WorkspaceComponent, ThreadComponent],
  templateUrl: './main.component.html',
  styleUrl: './main.component.scss',
  animations: [
    trigger('toggleWorkspace', [
      state(
        'open',
        style({
          opacity: '1',
        })
      ),
      state(
        'closed',
        style({
          opacity: '0.5'
        })
      ),
      transition('open<=>closed', animate('5s')),
       
    ])
  ]

组件 TS/类导出：

export class MainComponent implements OnInit {
  showWorkspaceMenu: boolean = false;

  constructor() {
    this.showWorkspaceMenu = true;
  }

  ngOnInit(): void {

  }

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

}

单击事件启动切换（），它更改 showWorkspaceMenu 的值，从而触发该部分的动画。

<section [@toggleWorkspace]="showWorkspaceMenu ?  'closed' : 'open'">
          <app-workspace></app-workspace>
      </section> 

组件 HTML：

<div class="wrapper">
  <span (click)="toggle()" class="toggle-btn">
      @switch(showWorkspaceMenu) {
        @case (false) {
       <span>open Workspace Menu</span>
      }
        @default {
        <span>close Workspace Menu</span>
          }
      }
  </span>
  <section class="header"> 
          <input placeholder="Devspace durchsuchen" class="flex-item2" type="text">
          <div class="flex-item1 user-info">UserInfo</div>
  </section>
  <section  class="content"> 
      <section  [@toggleWorkspace]="showWorkspaceMenu ?  'closed' : 'open'">
          <app-workspace></app-workspace>
      </section>  
  </section>
</div>

我已经在main.ts中导入了provideAnimations。我已经尝试使用来自 '@angular/platform-browser/animations/async' 的 ProvideAnimationsAsync 进行相同的操作。

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { provideAnimations} from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent,  {
providers: [
provideAnimations(),
...appConfig.providers]
})
.catch((err) => console.error(err))

Answer 1

您的过渡太大，这会给您一种动画没有发生的错觉。只需

5

秒即可完成，请尝试更小的间隔，例如

0.5s

。

transition('open<=>closed', animate('0.5s')),

Stackblitz 演示