Angular 8：如何为桌面与移动端触发不同参数的动画？

完全理解你的困扰——复制DOM元素确实是冗余且不易维护的方案。基于你使用的Angular动画系统，我给你几个更简洁的实现思路：

方案1：CSS变量 + 媒体查询（最推荐，无JS依赖） #

核心思路是用CSS变量定义动画的偏移方向，通过媒体查询在移动端切换变量值，Angular动画直接复用这些变量，无需修改动画逻辑。

步骤1：在组件CSS中定义变量和媒体查询 #

.popover-container {
  /* 桌面端默认值：X轴偏移60% */
  --translate-offset-x: 60%;
  --translate-offset-y: 0;
}

/* 移动端断点（可根据你的需求调整宽度） */
@media (max-width: 768px) {
  .popover-container {
    /* 移动端切换为Y轴偏移60% */
    --translate-offset-x: 0;
    --translate-offset-y: 60%;
  }
}

步骤2：修改Angular动画代码，使用CSS变量 #

animations: [
  trigger("slideInOut", [
    transition(":enter", [
      style({ 
        transform: "translate(var(--translate-offset-x), var(--translate-offset-y))", 
        opacity: 0 
      }),
      animate(
        "300ms ease-in",
        style({ 
          transform: "translate(0, 0)", 
          opacity: 1 
        })
      ),
    ]),
    transition(":leave", [
      animate(
        "300ms ease-in",
        style({ 
          transform: "translate(var(--translate-offset-x), var(--translate-offset-y))", 
          opacity: 0 
        })
      ),
    ]),
  ]),
]

这样一套动画代码就能适配两端，完全不需要复制DOM，后期调整断点或偏移值也只需要改CSS。

方案2：Angular动画参数化（动态控制动画方向） #

如果需要更灵活的JS层面控制（比如根据业务逻辑切换而非仅屏幕宽度），可以给动画触发器传递参数，动态选择偏移方向。

步骤1：组件中添加屏幕尺寸判断逻辑 #

isMobile = false;

ngOnInit(): void {
  this.checkScreenSize();
  window.addEventListener('resize', () => this.checkScreenSize());
}

private checkScreenSize(): void {
  this.isMobile = window.innerWidth < 768;
}

ngOnDestroy(): void {
  window.removeEventListener('resize', () => this.checkScreenSize());
}

步骤2：模板中传递参数到动画触发器 #

<div [@slideInOut]="isMobile" class="popover-container">
  <!-- Popover内容 -->
</div>

步骤3：修改动画代码，根据参数切换偏移方向 #

animations: [
  trigger("slideInOut", [
    transition(":enter", [
      style({
        opacity: 0,
        transform: "{{$animationsContext.params ? 'translateY(60%)' : 'translateX(60%)'}}"
      }),
      animate(
        "300ms ease-in",
        style({
          opacity: 1,
          transform: "translate(0, 0)"
        })
      )
    ]),
    transition(":leave", [
      animate(
        "300ms ease-in",
        style({
          opacity: 0,
          transform: "{{$animationsContext.params ? 'translateY(60%)' : 'translateX(60%)'}}"
        })
      )
    ])
  ])
]

方案3：移动端直接禁用动画 #

如果不需要移动端动画，直接用CSS媒体查询禁用即可，无需修改动画代码：

@media (max-width: 768px) {
  .popover-container {
    animation: none !important;
    transition: none !important;
    /* 强制设置初始/结束状态，避免动画残留 */
    transform: translate(0, 0) !important;
    opacity: 1 !important;
  }
}

以上三个方案都能避免复制DOM的冗余问题，其中方案1是最简洁易维护的，推荐优先使用。

内容的提问来源于stack exchange，提问作者AJ-