首先得拆解你遇到的核心问题：

• info-popup用display: none到display: block的切换无法触发过渡动画——display属性不属于CSS可过渡属性的范畴；
• 依赖width和height做过渡会触发浏览器的重排（Reflow），每次尺寸变化都要重新计算整个页面的布局，这就是动画卡顿的根源。

为什么用transform性能更优？ #

transform（比如scale()）是在浏览器的GPU合成层处理的，不会触发重排，只会触发轻量的重绘或者直接合成，性能开销极小，动画会更流畅。而且transform的缩放效果天然适配你要的“拉动放大”视觉逻辑。

具体实现方案 #

我们需要调整两个元素的CSS逻辑：用opacity/visibility替代display控制弹窗显示，用transform: scale()替代宽高变化，同时设置正确的transform-origin确保缩放原点符合需求，最后同步两者的过渡参数。

修改后的.info-popup CSS

.info-popup{
  /* 用opacity+visibility替代display:none实现初始隐藏 */
  opacity: 0;
  visibility: hidden;
  /* 直接设置目标尺寸，用缩放控制初始大小 */
  width: 850px;
  height: 400px;
  background: grey;
  position: absolute;
  bottom: 65px;
  left: 2%;
  /* 设置缩放原点为左下角，匹配拉动视觉 */
  transform-origin: bottom left;
  /* 初始缩放为原小尺寸比例：300/850（宽）、150/400（高） */
  transform: scale(calc(300/850), calc(150/400));
  /* 同步过渡transform、opacity、visibility */
  transition: transform 1s ease, opacity 1s ease, visibility 1s ease;
}

.info-popup[data-display="true"]{
  opacity: 1;
  visibility: visible;
  /* 缩放回原始尺寸 */
  transform: scale(1);
}

修改后的.programImage CSS

.programImage{
  position: absolute;
  bottom: 0;
  z-index: 2;
  /* 直接设置目标尺寸，用缩放控制初始大小 */
  width: 100%;
  height: 150px;
  /* 同样设置缩放原点为左下角 */
  transform-origin: bottom left;
  /* 初始缩放为原小高度比例：90/150 */
  transform: scaleY(calc(90/150));
  /* 过渡transform，和弹窗保持同步时长 */
  transition: transform 1s ease;
}

.programImage img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 避免图片缩放变形 */
}

.programImage[data-playerinfo-expanded="true"]{
  /* 缩放回原始高度 */
  transform: scaleY(1);
  /* 如果需要宽度变化，用scaleX实现，比如原360px对应100%宽度的话： */
  /* transform: scale(calc(360/100), 1); */
}

关键细节说明 #

1. 缩放原点：transform-origin: bottom left让两个元素都从左下角开始缩放，完美匹配“info-popup拉动programImage”的视觉逻辑；
2. 初始比例计算：用calc()精准计算初始缩放比例，保证初始状态和你原来的宽高一致；
3. 过渡同步：两个元素的transition时长、缓动函数完全统一，确保动画完全同步；
4. 图片适配：给img添加object-fit: cover，避免缩放时图片拉伸变形。

这样修改后，就能得到流畅的同步缩放动画，彻底解决之前的卡顿和过渡无效问题。

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