当开启/关闭面板（如Android）时，面板上的淡入淡出效果

我使用PhoneGapp framewok工作在特定的Android应用程序（compagnon应用程序中的参观者在事件中）。所以我的应用程序只是一个网页，使用Jquery和Jquery Mobile。当开启/关闭面板（如Android）时，面板上的淡入淡出效果

我希望模拟相同的面板效果可见于Android的一个侧面板openned（Gmail是效果良好的示范）：

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

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

我的问题是：我怎么可以让一个350毫秒的fad-/缩小的UI面板的解雇 DIV当面板openned /关闭？（如果可能，只在CSS中）。

感谢答案:)

来源

2013-08-01 Moff Tigriss

你尝试jQuery的方法 “动画”？

或CSS转换：http://www.w3schools.com/css3/css3_transitions.asp

来源

2013-08-01 11:33:26

尽管此链接可能回答此问题，但最好在此处包含答案的重要部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 – Arpit

哦，我没有想到，谢谢你的信息。我会在下次做。 :) –

在这里，你可以创建自己的转型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

来源

2013-08-01 14:54:46

当开启/关闭面板（如Android）时，面板上的淡入淡出效果

回答

相关问题