jQuery Mobile Transition Fade

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 索引，因此它将位于第一页的顶部

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