Flutter启动页自定义页面过渡动画实现方法咨询

下面是两种可行的实现思路，从纯CSS到结合JS的方案都有，你可以根据项目技术栈选择：

方案一：纯CSS + 容器拆分（最直观） #

核心思路是把启动页拆成上下两个独立容器，分别控制它们的位移动画，步骤如下：

1. HTML结构
   把启动页的完整内容分别放在两个section里，每个section对应上下半屏：

<div class="splash-screen">
  <div class="splash-top">
    <!-- 启动页上半部分内容，比如logo、标语等 -->
    <div class="content">
      <h1>我的应用</h1>
      <p>欢迎使用</p>
    </div>
  </div>
  <div class="splash-bottom">
    <!-- 启动页下半部分内容，和上半部分完全一致，保证视觉连贯 -->
    <div class="content">
      <h1>我的应用</h1>
      <p>欢迎使用</p>
    </div>
  </div>
</div>

2. CSS样式与动画
   设置全屏布局，给上下容器分配50%高度，再定义位移动画：

/* 基础全屏布局 */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 上下分屏容器 */
.splash-top, .splash-bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff; /* 匹配你的启动页背景 */
}

.splash-top {
  top: 0;
}

.splash-bottom {
  top: 50%;
}

/* 内容样式，保证在分屏内居中 */
.content {
  text-align: center;
}

/* 定义移出动画 */
@keyframes slide-up {
  to {
    transform: translateY(-100%);
  }
}

@keyframes slide-down {
  to {
    transform: translateY(100%);
  }
}

/* 触发动画的类 */
.splash-screen.exit .splash-top {
  animation: slide-up 0.6s ease-in-out forwards;
}

.splash-screen.exit .splash-bottom {
  animation: slide-down 0.6s ease-in-out forwards;
}

3. 触发动画
   当需要关闭启动页时（比如页面加载完成、用户点击按钮），给.splash-screen添加exit类即可：

// 示例：页面加载完成后触发动画
window.addEventListener('load', () => {
  setTimeout(() => {
    document.querySelector('.splash-screen').classList.add('exit');
    // 动画结束后移除启动页元素，避免遮挡
    setTimeout(() => {
      document.querySelector('.splash-screen').remove();
    }, 600); // 时间和动画时长一致
  }, 2000); // 启动页停留2秒
});

方案二：使用CSS Clip-path（无需重复内容） #

如果不想重复写启动页内容，可以用clip-path裁剪单个容器，分别控制上下区域的显示：

1. HTML结构
   只需要一个容器包裹启动页内容：

<div class="splash-screen">
  <div class="content">
    <h1>我的应用</h1>
    <p>欢迎使用</p>
  </div>
</div>

2. CSS样式与动画
   用两个伪元素覆盖在启动页上方，通过裁剪动画实现拆分效果：

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.content {
  text-align: center;
}

/* 用伪元素创建上下遮罩层 */
.splash-screen::before, .splash-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* 和启动页背景一致 */
  transition: clip-path 0.6s ease-in-out;
}

.splash-screen::before {
  clip-path: inset(0 0 50% 0); /* 初始显示上半部分 */
}

.splash-screen::after {
  clip-path: inset(50% 0 0 0); /* 初始显示下半部分 */
}

/* 触发动画时修改裁剪区域 */
.splash-screen.exit::before {
  clip-path: inset(100% 0 50% 0); /* 上半部分向上移出 */
}

.splash-screen.exit::after {
  clip-path: inset(50% 0 100% 0); /* 下半部分向下移出 */
}

3. 触发动画逻辑和方案一一致
   同样通过添加exit类来启动动画，动画结束后移除容器。

注意事项 #

• 调整animation或transition的时长和缓动函数（比如ease-in-out），匹配你想要的动画节奏
• 如果启动页背景是图片，方案一中的两个section需要分别设置背景图，并调整background-position保证上下拼接完整（比如上半部分background-position: top，下半部分background-position: bottom）
• 动画结束后记得移除启动页元素，避免影响后续页面的交互

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