滑动后动画页面样式更改

Question

我决定创建一个页面，在移动设备上滑动手指后，它的 css 样式会完全改变。

我设法实现了这一切。它的工作原理如下：

1. 第一个样式在 main.css 文件中指定
2. 为方便起见，每个后续的（有四个）都在其他文件中指定
3. 我在 jQuery Mobile 库的帮助下检测到滑动
4. 滑动后，主体的类会发生变化，因此您可以为每次更改指定单独的样式

一切正常，但我希望这些滑动具有动画效果。 我不知道该怎么做，因为它只是样式改变的一方面。

可以吗？以及如何？

Image of the intended effect

照片显示了我希望动画在其持续时间中途的样子。

提前感谢所有答案

Answer 1

我假设您正在使用 jquery 的窗口滑动功能

window.on("swipe", function() {}

当您更改元素（或主体）的类时，您还可以在 css 中指定动画/过渡。例如，如果您要在此处更改此 div，您可以为要添加的新类指定动画或过渡-

<div class = "classOne"></div>
<style>
.classTwo {
   transition: all 2s ease;
   background-color: blue;
  }
  </style>

所以现在当您使用 jQuery 将 divs 类更改为 classTwo 时，将应用过渡或动画。