当元素进入angular11中的可视区域时执行动画

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule
  ],
  ...
})
export class AppModule { }

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('fadeIn', [
      state('void', style({ opacity: 0 })),
      state('*', style({ opacity: 1 })),
      transition(':enter', animate('500ms ease-in')),
      transition(':leave', animate('500ms ease-out'))
    ])
  ]
})
export class YourComponent implements OnInit {
  isVisible: boolean = false;

  constructor() { }

  ngOnInit(): void {
  }

  toggleVisibility(): void {
    this.isVisible = !this.isVisible;
  }
}

<div [@fadeIn]="isVisible ? 'visible' : 'hidden'"></div>