Angular BrowserAnimation 自下而上滑入动画方向反向问题求助

你当前的动画仅配置了高度和透明度的变化，而绝对定位元素默认以父元素顶部为高度计算基准，高度从0增长到318px时会从上向下撑开，和预期的从下向上展开方向相反。你尝试的animation-direction: reverse是原生CSS动画的属性，不适用于Angular的声明式动画体系，因此不会生效。

方案1：固定高度适配（适配你当前写死高度318px的场景） #

通过固定绝对定位元素的底部对齐基准，让高度增长时向顶部延伸，只需在动画的样式配置中新增bottom: 0规则，同时删除你给该div额外设置的top属性避免定位冲突即可：

animations: [
    trigger('inOutAnimation', [
      transition(':enter', [
        style({ height: 0, opacity: 0, bottom: 0 }),
        animate('1s linear', style({ height: 318, opacity: 1 })),
      ]),
      transition(':leave', [
        style({ height: 318, opacity: 1, bottom: 0 }),
        animate('1s linear', style({ height: 0, opacity: 0 })),
      ]),
    ]),
  ],

方案2：自适应高度通用方案 #

如果后续需要适配动态高度的场景，可以用transform位移实现，无需写死高度值也不需要调整定位属性：

animations: [
    trigger('inOutAnimation', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(100%)' }),
        animate('1s linear', style({ opacity: 1, transform: 'translateY(0)' })),
      ]),
      transition(':leave', [
        style({ opacity: 1, transform: 'translateY(0)' }),
        animate('1s linear', style({ opacity: 0, transform: 'translateY(100%)' })),
      ]),
    ]),
  ],

该方案通过Y轴位移实现滑动效果：初始状态下元素向下偏移自身完整高度，动画过程中偏移量归零，自然实现从下往上滑入的效果，滑出时向下偏移回到初始位置，完全匹配需求。

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