0

私は固定ヘッダーと固定フッターを持つ html5 アプリケーションに取り組んでいます。

フッターをクリックすると、ヘッダーから 10 ピクセル離れるまで上にスライドするはずです。

ヘッダーについても同じことが起こるはずです。

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

デフォルト レイアウトの CSS は簡単です。上下に絶対配置を使用するだけです。

.header, .footer {
    min-height:25px;
    background:grey;
    position:absolute;
    left:0;
    z-index:5;
    /** transition **/
    transition: all 1s;
}

.header {
    top:0;
    background:red;
}

.footer {
    bottom:0;
    background:yellow;
}
.header.max {
    bottom:35px;
}
.footer.max {
    top:35px;
}

いいえ、アニメーションの部分に来ます。Javascript アニメーションを使いたくない! CSSのみ！ ヘッダーまたはフッターをクリックすると、クラスmaxを要素に追加するだけです。

$(".header, .footer, .content").on("click", function () {
  $(".max").removeClass("max");
  $(this).addClass("max");
});

アニメーションは、フッターが下から展開するように見えるはずです。

JS-Fiddleを作成しました。フッター/ヘッダーの上下の配置に問題があることがわかります。

アニメーションがフッターが下から拡大しているように見えるように、それを修正する方法を知っている人はいますか?

ありがとう！

4

1 に答える 1

1

アニメーション効果をよりスムーズにするには、トランジション要素を高さに設定する必要があります。私の例では、ヘッダーとフッターのアニメーションを300pxに設定しています。JS を使用してこれを変更し、window.height() などでclass="max" を更新する必要があります。

10px の要件に取り組む 1 つの方法は、onload get window.height() から 10px を引いてから、最終結果で class="max" を更新することです。

あなたのCSSで私が変更したこと：

.header, .footer {
    min-height:25px;
    background:grey;
    position:absolute;
    left:0;
    z-index:5;
    /** transition **/
    transition:height 2s;
    -webkit-transition:height 2s; /* Safari */
}

.header.max {
   height:300px;
}
.footer.max {
   height:300px;
}

フィドル

http://jsfiddle.net/JSED5/3/

于 2013-11-15T19:27:27.260 に答える