滚动时用jQuery切换类实现Logo缩放，CSS过渡失效如何解决？

嗨，我来帮你搞定这个滚动时Logo的过渡动画问题！你遇到的核心问题是过渡动画的定义位置不对，以及初始状态缺少明确的尺寸值，导致移除类的时候浏览器没法平滑过渡回去。

问题根源分析 #

1. 你把transition只加在了.logo-small类里，但当移除这个类时，Logo回到默认样式，而默认样式没有过渡属性，所以会直接跳变。
2. 默认的Logo样式没有设置明确的max-height值，浏览器不知道“大尺寸”的基准是多少，自然无法计算过渡动画。

修正后的代码实现 #

第一步：调整CSS样式

需要给Logo的基础状态添加过渡属性和明确的初始尺寸，而不是只在缩小类里定义：

.logolink {
  position: relative;
  display: inline-block;
}

/* 给默认的Logo设置初始尺寸和过渡动画 */
.logolink img {
  max-height: 200px; /* 这里替换成你原来大Logo的实际高度 */
  transition: max-height 0.3s ease; /* 过渡时长和缓动函数可按需调整 */
}

/* 缩小后的样式 */
.logolink img.logo-small {
  max-height: 100px;
}

第二步：确保jQuery滚动事件绑定正确

要把你的逻辑绑定到window的滚动事件上，确保滚动时能触发类的添加/移除：

$(window).scroll(function() {
  const scrollPos = $(this).scrollTop();
  if (scrollPos > 50) {
    $('.logolink img').addClass('logo-small');
  } else {
    $('.logolink img').removeClass('logo-small');
  }
});

额外性能优化（可选） #

滚动事件会频繁触发，可能影响页面性能，你可以用防抖函数来减少触发次数：

// 防抖函数
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 绑定防抖后的滚动事件
$(window).scroll(debounce(function() {
  const scrollPos = $(this).scrollTop();
  if (scrollPos > 50) {
    $('.logolink img').addClass('logo-small');
  } else {
    $('.logolink img').removeClass('logo-small');
  }
}, 80)); // 80毫秒延迟，可根据需求调整

为什么这样能生效？ #

• 过渡属性定义在Logo的基础样式上，不管类有没有被添加/移除，浏览器都能识别到需要执行过渡动画。
• 明确的初始max-height值给了浏览器一个基准，它能计算从“大尺寸”到“小尺寸”（以及反向）的平滑过渡过程。

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