// 用 CSS 独立变换属性 `scale`/`translate` 取代整体 `transform`,
// 避免动画与拖拽内联样式互相覆盖、动画结束瞬间内联 transform 反扑导致跳帧
@keyframes spring-in {
  0% {
    scale: 0;
  }
  40% {
    scale: 1.1;
  }
  60% {
    scale: 1;
  }
  80% {
    scale: 1.02;
  }
  100% {
    scale: 1;
  }
}

.spring-enter-active {
  transform-origin: center;
  will-change: scale;
  animation: spring-in 0.5s ease-in-out;
}

.spring-leave-active {
  transform-origin: center;
  will-change: scale, translate, opacity;
  transition:
    scale 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06),
    translate 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06),
    opacity 0.4s cubic-bezier(0.64, -0.32, 0.66, 1.06);
}

.spring-leave-to {
  scale: 0;
  // 离开时归位到中心 (即便此前被拖拽过), 与原行为一致; !important 用于覆盖拖拽内联样式
  translate: 0 0 !important;
  opacity: 0;
}