移除HTML加载页元素loading类后未触发预期CSS过渡动画问题求助

问题根因 #

1. CSS语法错误：你在#loading-page:not(.loading)规则中，transform属性末尾漏写了分号，导致后面紧跟的transition属性被浏览器判定为无效语法直接忽略，因此没有过渡效果。
2. visibility属性逻辑问题：visibility: hidden是离散属性，默认会立即生效，未配置对应过渡规则的情况下，会导致元素直接隐藏，看不到动画过程。
3. 初始状态配置缺失：HTML结构中#loading-page默认未添加loading类，页面刚加载时元素默认处于隐藏状态，$(document).ready中执行的removeClass操作没有对应的初始状态匹配，也会导致首次加载的过渡动画无法触发。

修复方案 #

步骤1：修复CSS语法错误，调整过渡规则 #

把原来“Once the page loads”部分的代码替换为以下内容，同时新增基础默认样式：

/* 新增基础默认样式，避免重复定义 */
#loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  /* 统一配置过渡，避免状态切换时规则缺失 */
  -webkit-transition: transform 0.3s 1s ease-out, visibility 0s 1.3s;
  transition: transform 0.3s 1s ease-out, visibility 0s 1.3s;
}

/* 加载状态样式 */
#loading-page.loading {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;
  /* 显示的时候不需要延迟，立即生效 */
  -webkit-transition: transform 0.3s ease-out, visibility 0s 0s;
  transition: transform 0.3s ease-out, visibility 0s 0s;
}

#loading-page.loading #loading-page-icon {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  z-index: 1001;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}

/* 原有其他loading状态的样式、spin动画代码保持不变，此处省略重复内容 */

/* Once the page loads */
#loading-page:not(.loading) {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: hidden;
}

#loading-page:not(.loading) #loading-page-icon {
  opacity: 0;
}

#loading-page:not(.loading) .loading-curtain.section-left {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#loading-page:not(.loading) .loading-curtain.section-right {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

步骤2：修改HTML初始状态 #

给#loading-page默认添加loading类，保证页面刚打开时加载屏处于显示状态：

<body>
    <div id="loading-page" class="loading">
      <div id="loading-page-icon"></div>
      <div class="loading-curtain section-left"></div>
      <div class="loading-curtain section-right"></div>
    </div>

   ...[other html code]
</body>

步骤3：JS代码无需修改 #

原有JS逻辑可以正常适配修改后的样式规则。

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