1

CSSでiOSのアクションシートをエミュレートしようとしています。

アクションシート

私の考えは、アクション シートを常に Web ページのすぐ下にある固定位置の要素にすることです。アクション シートを表示する必要がある場合は、翻訳変換を行います。

隠れた：

____________
|           |
|           |
|  Webpage  |
|           |
|           |
|___________|
 |         |
 | Sheet   |
 |_________|

開いた

____________
|           |
|  Webpage  |
| _________ |
||         ||
||  Sheet  ||
||_________||

アクションシートに静的な高さがあると簡単です。すべての値をハードコーディングできます。

#sheet {
    position: fixed;
    left: 0;
    bottom: -12em;
    height: 12em;
    transition: all 0.5s ease-out;
}

#sheet.opened {
    transform: translate(0, -12em);
}

アクションシートに可変数のボタンがあり、シート全体の高さに影響を与える場合、どうすればよいかわかりません。

4

1 に答える 1

0

ここを参照してください: http://jsfiddle.net/uSXKe/

代わりに、高さを通常との間で切り替えることができます0が、これには少しの JavaScript が必要です。

var height = $("#action").height();
$("#action").height(height);
$("#home").click(function(){
    var $act = $("#action");
    $act.toggleClass("active");
    $act.css("height", $act.hasClass("active") ? height : "0");
});​

関連する CSS:

#action{
    height:0;
    position:absolute;
    bottom:0;
    width:100%;
    -webkit-transition:height .2s linear;
}
于 2012-12-11T19:57:09.657 に答える