如何实现loader加载完成后另一页面从右侧淡入的动画效果

首先先修正你现有代码的结构错误：当前代码把页面容器错误嵌套在了预加载层内部，且末尾标签闭合有误，先调整为同级结构（预加载层是独立的全屏遮罩，和页面容器为兄弟节点）：

<!-- BEGIN: PRELOADER -->
<div id="loader" class="center">
  <div class="loader animate fadeInUp one">
    <img src="img/LOGO-1.png" alt="loader" id="logo-1"/>
  </div>
</div>
<!-- END: PRELOADER -->
<div class="container">
  <img src="./img/LOGO-2.png" alt="comingsoon" class="logo__img" />
</div>

1. 编写CSS动画样式 #

核心逻辑是给两个元素设置初始状态和过渡规则，通过类名切换触发动画：

/* 预加载层基础样式：全屏固定置顶 */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff; /* 按你网站的背景色修改 */
  z-index: 9999;
  transition: all 0.5s ease; /* 淡出过渡时长 */
}
/* 预加载层隐藏状态 */
#loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
}

/* 页面容器初始状态：右侧偏移+透明，默认隐藏 */
.container {
  opacity: 0;
  transform: translateX(80px); /* 偏移距离可自行调整，数值越大滑入距离越远 */
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* 淡入滑入过渡效果 */
}
/* 页面容器激活状态：归位+完全不透明 */
.container.container-show {
  opacity: 1;
  transform: translateX(0);
}

2. 编写JS控制动画时序 #

逻辑是等页面资源加载完成（或预加载层自身动画播放完毕）后，先让预加载层淡出，淡出完成后再触发页面容器的淡入滑入效果：

// 等待页面所有资源（图片、字体等）加载完成
window.addEventListener('load', () => {
  const loader = document.getElementById('loader');
  const container = document.querySelector('.container');

  // 如果需要等预加载logo的入场动画跑完再切换，解开下面这段注释即可
  // const loaderInner = document.querySelector('.loader.animate');
  // loaderInner.addEventListener('animationend', () => {
  //   triggerSwitch();
  // })

  // 不需要等loader内动画的话直接触发切换
  triggerSwitch();

  function triggerSwitch() {
    // 先给loader加隐藏类触发淡出
    loader.classList.add('loader-hidden');
    // 等loader淡出动画结束后，触发容器入场
    loader.addEventListener('transitionend', () => {
      container.classList.add('container-show');
      // 可选：动画完成后彻底移除loader节点减少DOM占用
      loader.remove();
    }, { once: true }) // once:true保证事件只触发一次
  }
})

你可以根据自己的设计需求调整CSS里的过渡时长、偏移距离、缓动函数，匹配自己网站的整体风格。

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