0

我使用PhoneGapp框架开发一个特定的 Android 应用程序（活动中访客的配套应用程序） 。所以我的应用程序只是一个网页，带有 Jquery 和 Jquery Mobile。

我想模拟打开侧面板时在 Android 中可查看的相同面板效果（Gmail 是效果的一个很好的演示）：

  • 应用全屏
  • 在 350 毫秒内，面板开始滑动并且应用程序的不透明度降低
  • 幻灯片结束，不透明度现在为 0.6（当然是黑色背景）

所以，在我的应用程序中，一切都是完美的（不透明度、背景等），除了面板打开时的褪色动画。

我的问题是：当面板打开/关闭时，如何在ui-panel-dismiss div 上进行 350 毫秒的淡入/淡出？（如果可能，仅在 CSS 中）。

感谢您的回答:)

4

2 回答 2

0

Did you try jQuery method "animate" ? http://api.jquery.com/animate/

Or css transition : http://www.w3schools.com/css3/css3_transitions.asp

于 2013-08-01T11:33:26.280 回答
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 回答