Angular指令如何为DOM父级元素播放动画？原生animate调用为何无效

你的方案失效和你用指令还是组件封装无关，核心是原生Web Animations API的调用存在以下问题：

• 缺少动画配置参数：animate()方法的第二个参数需要传入动画时长或者完整配置对象，不传该参数时默认动画时长为0，动画会瞬间执行完成，肉眼看不到任何过渡效果。
• 关键帧定义不完整：你只提供了动画的结束状态，没有定义起始状态。如果目标.cdk-overlay-pane元素本身没有明确的初始width/height样式，浏览器无法生成平滑的过渡插值，也会导致动画失效。
• 执行时机错误：Angular CDK的overlay容器挂载到DOM存在延迟，如果你的代码在ngOnInit等早期生命周期钩子中执行，即使能查询到元素，也可能因为元素未完成渲染导致动画无法触发。
• 没有配置动画结束状态保持：默认情况下动画结束后元素会回弹到初始样式，如果你没加对应配置，就算动画执行了也看不到最终效果。

调整后的代码如下：

// 建议放在ngAfterViewInit生命周期执行，或加短延迟保证overlay完全挂载
this.panelParentElement = this.element.closest('.cdk-overlay-pane') as HTMLElement;

const animation = this.panelParentElement.animate(
  [
    // 起始状态：取元素当前渲染的宽高作为初始值
    { 
      width: `${this.panelParentElement.offsetWidth}px`, 
      height: `${this.panelParentElement.offsetHeight}px` 
    },
    // 结束状态
    { width: '100vw', height: '100vh' }
  ],
  // 动画配置项
  {
    duration: 300, // 动画时长，单位ms，可自定义
    easing: 'ease-out', // 缓动函数，可自定义
    fill: 'forwards' // 动画结束后保持结束状态，不会回弹
  }
);
animation.play();

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