css - jQuery Mobile 过渡淡入淡出

Question

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

我想禁用此淡入淡出。我希望新页面能够向上滑动而不会发生任何褪色。这应该是可能的。也许是一个简单的 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
}