Question

当我使用jQuery Mobiles data-transition="slideup"进行页面转换时，页面本身将fadeOut，并且只有在此之后才会出现页面的滑动。这种行为似乎与jQuery Mobile本身一致，因为即使是Documentations也有同样的问题。

我想禁用此淡入淡出。我希望新页面只是向上滑动而不会发生任何褪色。这应该是可能的。或许简单的jQuery slideIn()？但是我想以正确的方式做到这一点，也许有人已经把这个想出来了？

注意：我尝试了-webkit-backface-visibility: hidden，但似乎与此无关，因为实际的幻灯片转换完成了。在页面消失之后....

Answer 1

我自己解决了这个问题。

我有两页#one和#two。点击#one页#two中的按钮后，应该从底部滑动。现在为了防止第一页的淡入淡出， jQuery Mobile通常会在向下滑动第二页之前创建一个自定义动画，如下所示：

@-webkit-keyframes dontdoshit {
    from { -webkit-transform: translate(0,0); }
    to { -webkit-transform: translate(0,0); }
}
@-moz-keyframes dontdoshit {
    from { -moz-transform: translate(0,0); }
    to { -moz-transform: translate(0,0); }
}
@keyframes dontdoshit {
    from { transform: translate(0,0); }
    to { transform: translate(0,0); }
}

现在我确保在页面#one上调用此动画，否则会在页面#two向上滑动之前逐渐消失。

.slideup.out {
    -webkit-animation-name: dontdoshit;
    -webkit-animation-duration: 1ms;
    -moz-animation-name: dontdoshit;
    -moz-animation-duration: 1ms;
    animation-name: dontdoshit;
    animation-duration: 1ms;
}
.slideup.in.reverse {
    -webkit-animation-name: dontdoshit;
    -webkit-animation-duration: 1ms;
    -moz-animation-name: dontdoshit;
    -moz-animation-duration: 1ms;
    animation-name: dontdoshit;
    animation-duration: 1ms;
}

最后为了防止jQuery Mobiles Scriptlet隐藏我强行的第一页

#one {
display: block!important;
z-index: 2;
}

并为第二页提供了更高的z-index，因此它将位于第一页

之上

#two {
z-index: 9999;//this is quite a lot :o
}

jQuery Mobile Transition Fade

1 个答案: