如何解决滑动后动画页面样式更改
我决定创建一个页面,在移动设备上滑动手指后,其 css 样式会完全改变。
我设法实现了这一切。它的工作原理如下:
- 第一个样式在 main.css 文件中指定
- 为方便起见,在其他文件中指定了每个后续的(有四个)
- 我在 jQuery Mobile 库的帮助下检测到滑动
- 滑动后,主体的类会发生变化,因此您可以为每次更改指定单独的样式
一切正常,但我希望这些滑动能够动画化。 我不知道该怎么做,因为这是一方面,只是风格改变了。
能做到吗?以及如何?
这张照片显示了我希望动画在其持续时间中途的样子。
提前感谢您的所有回答
解决方法
我假设您正在使用 jquery 的窗口滑动功能
window.on("swipe",function() {}
当您更改元素(或主体)的类时,您还可以在 css 中指定动画/过渡。例如,如果您要在此处更改此 div,则可以为要添加的新类指定动画或过渡-
<div class = "classOne"></div>
<style>
.classTwo {
transition: all 2s ease;
background-color: blue;
}
</style>
所以现在当您使用 jQuery 将 divs 类更改为 classTwo 时,将应用过渡或动画。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。