當開啓/關閉面板（如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）時，面板上的淡入淡出效果

回答

相關問題