0

PhoneGappフレームワークを使用して、特定の Android アプリケーション (イベントの訪問者向けのコンパニオン アプリ) に取り組んでいます。したがって、私のアプリは、Jquery と Jquery Mobile を使用した単なる Web ページです。

サイドパネルを開いたときにAndroidで表示できる同じパネル効果をシミュレートしたい(Gmailは効果の良いデモンストレーションです):

  • アプリ全画面表示
  • 350 ミリ秒の間に、パネルがスライドし始め、アプリの不透明度が減少します
  • スライドが終了し、不透明度が 0.6 になりました (もちろん、黒の背景を使用)

したがって、パネルが開いているときのフェードアニメーションを除いて、私のアプリ（不透明度、背景など）はすべて完璧です。

私の質問は:パネルが開いている/閉じているときに、 ui-panel-dismiss div で 350 ミリ秒のフェードイン/アウトを作成するにはどうすればよいですか? (可能であれば、CSS のみ)。

答えてくれてありがとう:)

4

2 に答える 2

0

ここで、独自の変換Link1を作成できます

混乱した場合は独自のjs関数を作成し、jquery.mobile.jsファイルを開いて、ページ変換効果のためにそれらが何をするかを確認してください

$.mobile.transitionHandlers["slidefade"] = mycustomTransition;


function mycustomTransition( name, reverse, $to, $from ) {
var deferred = new $.Deferred();
// Define your custom animation here
$to.width("0");
$to.height("0");
$to.show();
$from.animate(
    { width: "0", height: "0", opacity: "0" },
    { duration: 750 },
    { easing: 'easein' }
);
$to.animate(
    { width: "100%", height: "100%", opacity: "1" },
    { duration: 750 },
    { easing: 'easein' }
);
// Standard template from jQuery Mobile JS file
reverseClass = reverse ? " reverse" : "";
viewportClass 
  = "ui-mobile-viewport-transitioning viewport-" + name;
$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.parent().addClass( viewportClass );
if ( $from ) {
  $from.addClass( name + " out" + reverseClass );
}
$to.addClass( $.mobile.activePageClass + " " + name 
  + " in" + reverseClass );
return deferred.promise();
}

ここで最初に Fiddle で試すことができますdemo fiddle

于 2013-08-01T14:54:46.160 に答える
0

jQueryメソッド「animate」は試しましたか？http://api.jquery.com/animate/

または CSS 遷移: http://www.w3schools.com/css3/css3_transitions.asp

于 2013-08-01T11:33:26.280 に答える