0

現在、jQuery/CSS/HTML を使用してモバイル アプリを開発しており、「戻る」ボタンをクリックしたときに独自のページ遷移を追加したいと考えています。しかし、これを行う方法についてオンラインで本当に良いチュートリアルを見つけることはできません。トランジションが実際に機能しており、デフォルトのトランジションが呼び出されていないことがわかるように、カスタム カラーの「トランジション」または目立つものを作成したい

これは私が現在持っているものですが、機能していません。機能していたとしても、十分に目立つとは思いません。

.js

function myTransitionHandler( name, reverse, $to, $from ) {

var deferred = new $.Deferred(),
reverseClass = reverse ? " reverse" : "",
viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
doneFunc = function() {

    $to.add( $from ).removeClass( "out in reverse " + name );

    if ( $from && $from[ 0 ] !== $to[ 0 ] ) {
        $from.removeClass( $.mobile.activePageClass );
    }

    $to.parent().removeClass( viewportClass );

    deferred.resolve( name, reverse, $to, $from );
};

$to.animationComplete( doneFunc );

$to.parent().addClass( viewportClass );

if ( $from ) {
$from.addClass( name + " out" + reverseClass );
}
$to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );

return deferred.promise();
}

// Make our transition handler public.
$.mobile.transitionHandlers["myTransition"] = myTransitionHandler;

戻るボタンの .html

<a href="#" data-rel="back"  data-role="button" data-inline="true" data-transition="myTransition" data-direction="reverse">Back</a>

欠けているものはありますか? どうすればトランジションをより際立たせることができますか?

4

1 に答える 1

0

まあ、これは少し遅いことは知っていますが、私はこれを理解し、投稿するかもしれないと思いました。

問題は次のとおりです。トランジションの名前「myTransition」は、「name」引数としてmyTransitionHandler関数に渡されます。

myTransitionHandlerに（css遷移ハンドラーから）すべての定型文が実装されているため、「myTransition」はcssに.myTransition.inおよび.myTransition.outとして存在する必要があります。

したがって、これを修正するには、次のいずれかを行う必要があります。

  1. cssに.myTransition.inルールと.myTransition.outルールを追加します。また
  2. myTransitionHandler関数の先頭で、「name」をサポートされているもの（「fade」など）に設定するだけです。

それがあなたの問題だと思います、これがお役に立てば幸いです...

于 2012-10-24T19:03:34.967 に答える