jQuery Mobile Transition Fade

Question

當我使用jQuery Mobiles data-transition="slideup"進行頁面轉換時，Page本身將會fadeOut，並且只有在那之後纔會出現頁面的滑動。 這種行爲似乎與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; 
} 

最後以防止隱藏我的第一頁我被迫

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

的jQuery的手機的Scriptlet，並給出了兩個頁更高的z-index所以它會在頁面的頂部有一個

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