页面加载后首次CSS动画执行不完整（后续正常）

API 探路者

2026-7-1

问题解决方案

核心问题分析

首次触发动画时缺少上滑效果，本质是浏览器未捕获到元素初始的transform状态——页面加载时如果没有给#hiddenLogo设置明确的初始位移值，第一次添加navbar-brand-visible类时，浏览器只会识别opacity的变化，忽略transform的过渡。另外，刷新时的状态异常是因为页面加载后没有主动检测滚动位置，导致初始状态与当前滚动位置不匹配。

具体修复步骤

1. 修正初始状态与CSS过渡逻辑

简化CSS，确保初始状态明确，同时让过渡规则统一复用，避免冗余定义：

/* 给#hiddenLogo设置默认初始状态，包含过渡规则 */
#hiddenLogo {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s, transform 1s;
}

.navbar-brand-visible {
  opacity: 1;
  transform: translateY(0);
}

.navbar-brand-invisible {
  opacity: 0;
  transform: translateY(10px);
}

2. 优化JavaScript滚动逻辑

用else if避免同时触发两个状态判断，防止状态冲突
页面加载完成后立即检查滚动位置，修复刷新时的状态异常：

$(document).ready(function() {
  // 替换为你实际的hero区域选择器，确保高度获取准确
  const heroHeight = $('.hero-section').outerHeight();
  
  // 页面加载时先初始化状态
  checkScrollPosition();

  // 监听滚动事件
  $(window).scroll(function() {
    checkScrollPosition();
  });

  // 提取滚动检查逻辑为独立函数，便于复用
  function checkScrollPosition() {
    const y = $(window).scrollTop();
    if (y > heroHeight) {
      $("#hiddenLogo").addClass('navbar-brand-visible').removeClass('navbar-brand-invisible');
    } else if (y === 0) {
      $("#hiddenLogo").addClass('navbar-brand-invisible').removeClass('navbar-brand-visible');
    }
  }
});