幻灯片转换前jQuery Mobile禁用页面淡入淡出

时间:2013-08-13 02:23:03

标签: jquery-mobile

非常简单,我有一个指向data-transition="slideup"的辅助页面的链接。当关闭时,该页面在打开和关闭时向上滑动,但是在单击链接本身时,当前页面在新页面向上滑动之前淡出。同样,关闭辅助页面时,它会向下滑动,然后其他页面会淡入。

我可以禁用此淡入效果吗?我只想让辅助页面滑过当前页面的顶部。

1 个答案:

答案 0 :(得分:0)

您正在寻找的是CSS转换定义。我遇到了同样的问题。如果您编辑CSS过渡(转换),那么您应该能够获得所需的效果。

转换定义为<transition name>.in.out。您可以在结构CSS文件中找到它们。对于jQuery Mobile 1.4.2,它们将在jquery.mobile.structure-1.4.2.css中定义。

以下是slideup(in和out)定义的定义:

.slideup.out { -webkit-animation-name: fadeout; -webkit-animation-duration: 100ms; -moz-animation-name: fadeout; -moz-animation-duration: 100ms; animation-name: fadeout; animation-duration: 100ms; } .slideup.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfrombottom; -webkit-animation-duration: 250ms; -moz-transform: translateY(0); -moz-animation-name: slideinfrombottom; -moz-animation-duration: 250ms; transform: translateY(0); animation-name: slideinfrombottom; animation-duration: 250ms; }

(这些定义也有reverse个版本。)

您需要做的就是修改这些CSS转换以获得所需的效果。请注意如何定义动画名称:slideinfrombottom?这些是在同一CSS文件中预定义的@keyframes

在此处修改所有内容应该可以为您提供在jQuery Mobile中调整和调整页面转换所需的一切。

重要提示:在in转换完成之前,jQuery Mobile不会触发out转换。如果您也想调整一下,那就完全不同了。我在1.4.2中看到了直接解决并发和同时转换的代码,但我没有彻底探索它。

相关问题