Angular Overlay CDK中withTransformOriginOn的使用及Tooltip位置动画实现

这个方法是Angular CDK ConnectedPositionStrategy专为联动动画设计的配套能力，核心解决Tooltip/浮层弹出方位和动画缩放原点不匹配的体验问题：

• 它的触发时机和位置策略的计算逻辑完全同步：每次CDK完成浮层方位判定（包括首次弹出计算、屏幕边缘碰撞自动调整方位、触发元素位置变更导致的方位重算）后，都会执行transform-origin的赋值
• 它内部内置了一整套方位和transform-origin的映射规则，和你在withPositions里定义的锚点参数完全对齐：比如浮层在触发元素上方弹出时，会自动给目标元素设置transform-origin: center bottom；在触发元素下方弹出时设置transform-origin: center top；在触发元素左侧弹出时设置transform-origin: center right；斜向弹出的场景也会匹配对应象限的偏移值，不需要开发者手动维护映射关系
• 它的赋值目标不是CDK生成的全局浮层容器，而是穿透浮层注入的组件内部，匹配你传入的选择器对应的DOM节点，完全适配自定义浮层的结构需求
• 在这个API出现之前，开发者需要手动订阅位置策略的方位变更事件，根据返回的位置值手动维护映射关系、给目标节点设置transform-origin，这个方法把全流程的样板代码内置到了CDK能力中，减少重复开发量

• 初始化连接式位置策略时，链式调用withTransformOriginOn方法，传入你的Tooltip组件最外层容器的选择器
  示例代码：

  // 基于触发元素构建弹性连接位置策略
  const positionStrategy = this.overlay
    .position()
    .flexibleConnectedTo(triggerElementRef)
    .withPositions([
      // 定义4个常用弹出方位
      { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
      { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 },
      { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },
      { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 }
    ])
    // 绑定Tooltip最外层容器的类名，指定transform-origin的赋值目标
    .withTransformOriginOn('.tooltip-root');
  

• 调整Tooltip组件模板结构，给最外层节点添加和选择器匹配的类名：

  <!-- 给最外层容器加对应类名 -->
  <div class="tooltip-root">
    这里是Tooltip的文本内容
  </div>
  

• 正常编写对应的缩放、渐入动画即可，不需要手动监听位置变化更新原点，比如：

  .tooltip-root {
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
  }
  

• 传入的选择器必须是Tooltip组件渲染完成后实际存在的DOM节点标识，如果选择器指向了容器内部的子元素，transform-origin会被设置到错误的节点上，导致动画偏移
• 不要在Tooltip的样式中用!important强制写死transform-origin，会覆盖CDK自动计算注入的值，导致方位和动画不匹配
• 不要把动画写在CDK生成的cdk-overlay-pane浮层容器上，withTransformOriginOn不会修改这个全局容器的样式，只作用于你选择器匹配的组件内部节点
• 如果浮层因为屏幕边缘触发了自动方位调整，方法会自动同步更新transform-origin，不需要额外监听位置变更事件

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