2

デフォルトのスライド効果をオーバーライドして、効果をディゾルブする必要があります。

関数が呼び出されたらchangePage、現在のページを新しいページにゆっくりと分解する必要があります。

私は次のCSSで試しました

@keyframes dissolve {
    0% { opacity:1; }
    5% { opacity:0.9;}
    15% { opacity:0.7;}
    25% { opacity:0.5;}
    35% { opacity:0.3;}
    45% { opacity:0;}
    55% { opacity:0.2;}
    65% { opacity:0.4;}
    75% { opacity:0.6;}
    85% { opacity:0.8;}
    95% { opacity:0.9;}
    100% { opacity:1;}
}
.in, .out, .slide.in, .slide.out, .slide.out.reverse, .slide.in.reverse {
    -webkit-animation-name: dissolve;
    -moz-animation-name: dissolve;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 350ms

}

上記のcssでフィドルを作成しました。

上記のコードではページ遷移がスムーズではありません。

ページ遷移をスムーズに行うには？

4

2 に答える 2

0

@keyframes: @-webkit-keyframes などのベンダー プレフィックスも必要です。

于 2013-02-16T21:27:57.133 に答える
0

キーフレームを使用したcssとjQuery MobileのCSSをオーバーライドすることでディゾルブ効果を得ています。

以下のようにCSS@-webkit-keyframesに 、@-moz-keyframes、 を追加してください。@-o-keyframes@keyframes

@keyframes dissolve-out {
    0% { opacity: 1; }
    20% { opacity: 0.5; }
    40% { opacity: 0.2; }
    60% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes dissolve-in {
    0% { opacity: 0; }
    20% { opacity: 0; }
    40% { opacity: 0; }
    60% { opacity: 0.2; }
    80% { opacity: 0.6; }
    100% { opacity: 1; }
}

.slideup.in, .slide.in, .slide.in.reverse {
    -webkit-animation: dissolve-in;
    -moz-animation: dissolve-in;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 3s !important;
    -moz-animation-duration:3s !important;
}
.slide.out, .slide.out.reverse {
    -webkit-transform: translateX(0%);
    -webkit-animation: dissolve-out;
    -moz-transform: translateX(0%);
    -moz-animation: dissolve-out;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 3s !important;
    -moz-animation-duration:3s !important;
}

デモをご覧ください。

上記のCSSは、jQuery Mobile のページ遷移のデフォルトのスライド効果をオーバーライドして、ディゾルブ効果を提供します。

于 2013-02-22T04:22:30.807 に答える