Question

我使用 PhoneGapp framewok处理特定的Android应用程序（针对参与者的compagnon应用程序）。所以我的应用程序只是一个网页，有Jquery和Jquery Mobile。

我希望在打开侧面板时模拟Android中可查看的相同面板效果（Gmail可以很好地证明效果）：

应用全屏
在350毫秒期间，面板开始滑动，应用程序的不透明度降低
滑动结束，不透明度现在为0.6（当然是黑色bakcground）

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

我的问题是：当面板打开/关闭时，如何在 ui-panel-dismiss div上制作350毫秒时尚/外出？（如果可能，仅限CSS）。

感谢您的回答：）

Answer 1

您是否尝试过jQuery方法“animate”？ http://api.jquery.com/animate/

或css过渡：http://www.w3schools.com/css3/css3_transitions.asp

Answer 2

您可以在此处创建自己的转化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();
}

你可以先在这里试试小提琴demo fiddle

打开/关闭面板（如Android）时对ui-panel-dismiss的淡化效果

2 个答案: