0

基本的にスターバックスのモバイル ナビゲーションを再現しようとしていますが、3 本の線をクリックしたときにスムーズにスライドを遷移させる方法がわかりません。このアニメーションを実現するために CSS3 トランジションを使用しているようですが、再現できません。

同じ結果が得られましたが、CSS3 は表示をアニメーション化しないため、アニメーション化されていません: 継承します。

これが私の JSFiddle です。Starbucks.com がモブ ナビゲーションで使用しているような CSS3 キュービック ベジエ トランジションを使用して改善できる人はいますか? (暴徒のナビゲーションを明らかに表示するには、ウィンドウのサイズを変更する必要があります)

ps これは CSS3 である必要があります。jQuery アニメーションは使用しないでください :-)

http://jsfiddle.net/zQxNd/2/

4

1 に答える 1

1

私が遭遇した最善の方法は、非表示メニューのデフォルト スタイルを次のように設定することです。

display:block;
overflow:hidden;
height:0;

次に、.open で要素の高さを設定します。

height: 200px;

私はあなたのフィドルを表示するように編集しました: http://jsfiddle.net/zQxNd/3/

また、jQuery を介して の高さを設定する簡単な jQuery 関数を作成するのがおそらく最善です。これは理想的ではありませんが、私が持っているツールで見つけた最良の解決策です。

編集: アニメーションの正確な速度を取得するには、この素晴らしい小さなアプリで遊ぶことができます: http://cubic-bezier.com/

タイミングが取れたらease-in、遷移宣言を次のように置き換えることができます。

transition: all 1s cubic-bezier(.17,.67,.83,.67)
于 2012-05-08T23:08:42.407 に答える