Angular 8-如何在桌面和移动设备上触发不同值的动画？

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('animationName', [
      state('desktop', style({
        // 定义桌面设备上的动画样式
      })),
      state('mobile', style({
        // 定义移动设备上的动画样式
      })),
      transition('desktop <=> mobile', animate('300ms ease-in-out'))
    ])
  ]
})

<div [@animationName]="isMobile ? 'mobile' : 'desktop'">
  <!-- 动画内容 -->
</div>

import { HostListener } from '@angular/core';

export class YourComponent {
  isMobile: boolean;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.isMobile = window.innerWidth < 768; // 根据需要调整阈值
  }
}