移动端滑动后页面样式切换的动画实现方案咨询

嘿，这个需求我之前做主题切换功能时刚好碰到过，其实有几种挺顺手的方案，纯CSS或者结合一点点JS就能搞定，给你梳理下：

这是最贴合你现有逻辑的方案——因为你已经通过切换body类名来变更样式了，只要给body的关键样式属性加上过渡声明就行，完全不用额外改JS逻辑。

举个例子：

/* 给body基础样式加上过渡规则 */
body {
  background-color: #ffffff;
  color: #333333;
  /* 精准指定要过渡的属性，比用all性能更好 */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* 你的各个主题类 */
.theme-dark {
  background-color: #1a1a1a;
  color: #f5f5f5;
}

.theme-ocean {
  background-color: #0077be;
  color: #fff;
}

这样当你切换body的类名时，所有指定的属性都会平滑过渡，完全是纯CSS实现，简洁又高效。

如果碰到像背景图片这种没法直接过渡的属性，可以用伪元素叠加的技巧：

body {
  position: relative;
  background-color: #fff;
  transition: background-color 0.3s ease;
}

/* 用伪元素承载背景图 */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('default-bg.jpg');
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

/* 切换主题时改变伪元素的背景图并显示 */
.theme-mountain::before {
  background-image: url('mountain-bg.jpg');
  opacity: 1;
}

如果想要更个性化的动画（比如切换时先缩放再渐变），可以用@keyframes定义自定义动画，然后在类名切换时触发：

/* 定义切换动画 */
@keyframes themeSwitchAnim {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

body {
  /* 基础样式 */
}

/* 触发动画的类 */
body.theme-changing {
  animation: themeSwitchAnim 0.5s ease-in-out;
}

然后在JS里调整切换逻辑，先加动画类，等动画结束后再切换到目标主题类：

$(document).on('swipeleft swiperight', function(e) {
  const targetTheme = e.type === 'swipeleft' ? 'theme-next' : 'theme-prev';
  
  // 先添加动画类
  $('body').addClass('theme-changing');
  
  // 等待动画结束后切换主题类，时间要和keyframes的duration一致
  setTimeout(() => {
    $('body').removeClass('theme-changing').addClass(targetTheme);
  }, 500);
});

既然你已经在用jQuery Mobile，其实它本身提供了不少页面过渡效果，你可以把页面内容包裹在一个容器里，切换类名时给容器加过渡样式：

<div id="theme-wrapper">
  <!-- 你的所有页面内容 -->
</div>

#theme-wrapper {
  width: 100%;
  height: 100vh;
  transition: transform 0.3s ease;
}

/* 左滑切换的过渡效果 */
.theme-slide-left #theme-wrapper {
  transform: translateX(-100%);
}

这种方式更适合类页面切换的视觉效果，如果你只是单纯变更样式，方案1就足够了。

• 尽量避免用transition: all，会过渡所有可动画属性，可能造成性能浪费，精准指定属性更好。
• 如果动画有卡顿，可以给body加will-change: background-color, color;，告诉浏览器提前做性能优化。

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