滑动后动画页面样式更改

Question

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

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

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

一切正常，但我希望这些滑动是动画的。 我不知道该怎么做，因为它是一侧，只是样式发生了变化。

可以吗？又如何？

Image of the intended effect

照片显示了我希望动画播放到一半时的样子。

提前感谢所有回答

Answer 1

我假设您正在使用 window 滑动功能和 jquery

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

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

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

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