Tailwind下使用:class绑定实现视频滚动缩宽的transform平滑过渡方案咨询

核心思路 #

放弃动态切换max-width实现缩放的逻辑，改用transform: scale()控制视频容器的大小，transform属性原生支持GPU加速的平滑过渡，性能和流畅度远高于宽高属性过渡。

具体实现步骤 #

1. 调整DOM结构，新增16:9比例容器避免视频变形 #

Vimeo视频默认是16:9比例，先套一层比例容器保证缩放过程中画面不会拉伸错乱：

<!-- 外层容器固定为缩小后的居中样式，不用动态切换 -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 relative">
  <!-- 视频容器，动态控制全屏状态，自带过渡属性 -->
  <div 
    :class="{'is-full': scrollAtTop}"
    class="transition-all duration-500 ease-in-out origin-top"
  >
    <!-- 16:9固定比例容器 -->
    <div class="aspect-video w-full relative">
      <iframe 
        src="https://player.vimeo.com/video/598778656?autoplay=0&mute=0" 
        class="absolute inset-0 w-full h-full"
        frameborder="0" 
        allow="autoplay; fullscreen" 
        allowfullscreen
      ></iframe>
    </div>
  </div>
</div>

2. 添加对应状态样式 #

.is-full {
  /* 计算全屏所需的放大比例：视口宽度 / 外层容器实际宽度 */
  --scale: calc(100vw / (100% - 2rem));
  transform: scale(var(--scale)) translateY(-2rem);
  /* 抵消放大后的高度溢出，避免下方内容跳变 */
  margin-bottom: calc((var(--scale) - 1) * 100%);
}

3. 兼容优化项 #

• 给页面根容器加overflow-x: hidden，避免视频放大后出现横向滚动条
• 过渡时长duration-500可以根据自己的交互需求调整，数值越大动画越慢
• 如果适配移动端嫌计算比例麻烦，可以直接替换成固定的scale值，比如scale(1.5)，调试到符合你的设计要求即可

最小修改方案（不调整原有DOM结构） #

如果你不想改现有DOM，可以直接给外层容器加过渡，把宽高变化转成transform缩放：

/* 给你原有外层容器加这个基础样式 */
.wrapper {
  transition: transform 0.5s ease-in-out;
  transform-origin: top center;
}
/* 非顶部状态的缩放样式 */
.wrapper:not(.scroll-top) {
  transform: scale(0.8); /* 缩放值根据你max-w-7xl和全屏的宽度比例调整 */
}

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