Bootstrap 3.3.7导航栏滚动折叠时动画无法播放求助

我之前也碰到过一模一样的情况——明明类已经加上了，开发者工具里也显示动画处于激活状态，但就是看不到动画效果。结合你的描述，大概率是浏览器重绘/重排时机的问题，下面给你几个针对性的解决方案：

1. 强制触发浏览器重绘（最可能解决你的问题） #

你提到修改其他div尺寸能触发动画，说明动画本身是有效的，只是滚动添加类时，浏览器把样式更新合并处理了，没触发动画所需的重绘。我们可以手动强制浏览器计算元素布局，让动画正常启动：

jQuery写法 #

$(window).scroll(function() {
  const $navbar = $('.navbar');
  if ($(document).scrollTop() > 50) {
    $navbar.addClass('shrink');
    // 读取height属性强制触发重绘
    $navbar.height();
  } else {
    $navbar.removeClass('shrink');
    $navbar.height();
  }
});

原生JS写法 #

window.addEventListener('scroll', () => {
  const navbar = document.querySelector('.navbar');
  if (window.scrollY > 50) {
    navbar.classList.add('shrink');
    // 读取offsetHeight强制触发重绘
    navbar.offsetHeight;
  } else {
    navbar.classList.remove('shrink');
    navbar.offsetHeight;
  }
});

原理很简单：读取元素的offsetHeight或height属性会强制浏览器立即计算元素的布局，打破样式更新的合并队列，让动画正常触发。

2. 检查CSS动画/过渡的优先级与定义 #

确保你的动画样式优先级足够，且过渡属性绑定正确：

• 把过渡属性加在.navbar基类上，而不是仅在.shrink类中：

.navbar {
  /* 用具体属性代替all，性能更优 */
  transition: height 0.3s ease, padding-top 0.3s ease;
  height: 80px;
  padding-top: 20px;
}

.navbar.shrink {
  height: 60px;
  padding-top: 10px;
}

• 避免Bootstrap默认样式覆盖自定义动画，必要时可以调整选择器优先级（比如用.navbar.navbar-default.shrink），尽量少用!important。

3. 确认滚动事件绑定时机 #

确保滚动事件是在DOM完全加载后绑定的，比如：

// jQuery
$(document).ready(function() {
  // 在这里绑定滚动事件
});

// 原生JS
document.addEventListener('DOMContentLoaded', () => {
  // 在这里绑定滚动事件
});

如果DOM还没加载完成就绑定事件，可能会导致元素获取失败，类无法正确添加。

4. 排除硬件加速干扰 #

少数情况下，硬件加速会导致动画异常，可以尝试给导航栏添加以下CSS触发硬件加速：

.navbar {
  transform: translateZ(0);
  backface-visibility: hidden;
}

先试试第一种强制重绘的方法，应该就能解决你的问题了，我之前遇到类似情况就是这么搞定的～

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