如何实现Cordova Splashscreen的slideUp效果而非淡入效果？

默认的Cordova Splashscreen插件仅支持淡入淡出动画，要实现slideUp效果，需结合自定义CSS动画与DOM操作，具体步骤如下：

1. 调整config.xml配置 #

先禁用默认淡入淡出效果，避免和自定义动画冲突：

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" /> <!-- 启动屏停留时长 -->
<preference name="FadeSplashScreen" value="false" />
<preference name="FadeSplashScreenDuration" value="0" />

2. 添加自定义CSS动画 #

在项目CSS文件（如www/css/styles.css）中定义slideUp动画：

/* 向下滑动消失的动画 */
@keyframes slideUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('../img/splash.png') no-repeat center center / cover;
  z-index: 9999;
  animation: slideUp 0.8s ease-in-out forwards;
  animation-delay: 2.2s; /* 停留时长减去动画时长：3000ms - 800ms = 2200ms */
}

3. 在启动页面添加Splashscreen元素 #

修改www/index.html，引入CSS并添加自定义启动屏节点：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <title>Your App</title>
</head>
<body>
  <!-- 自定义启动屏 -->
  <div class="splash-screen"></div>

  <!-- 应用主体内容 -->
  <div id="app"></div>

  <script src="cordova.js"></script>
  <script src="js/index.js"></script>
</body>
</html>

4. 动画结束后清理元素 #

在www/js/index.js的deviceready事件中，监听动画结束并移除启动屏元素：

document.addEventListener('deviceready', () => {
  const splashEl = document.querySelector('.splash-screen');
  
  splashEl.addEventListener('animationend', () => {
    splashEl.remove();
    // 确保原生Splashscreen也隐藏（若之前启用）
    navigator.splashscreen.hide();
  });
}, false);

注意事项 #

• 替换../img/splash.png为你实际的启动屏图片路径
• 根据需求调整animation-delay和SplashScreenDelay的数值
• 若完全使用自定义启动屏，可将SplashScreenDelay设为0，直接显示自定义节点

内容的提问来源于stack exchange，提问作者Raf A.