0

複数のペインと、それらを切り替えるためのナビゲーション メニューを備えた Web サイトを作成しています。CSS のトランジション効果を使用して、ペインの切り替えをアニメーション化したいと考えています。ペインは <li> 要素です。

<ol class="content">
    <li class="pane">This is pane 1.</li>
    <li class="pane">This is pane 2.</li>
    <li class="pane">This is pane 3.</li>
</ol>

、横に並べて配置されているので、コンテンツの margin-left プロパティをアニメーション化して、ペインを左右にスクロールさせたり、ビューから外したりします。

@-webkit-keyframes scroll1to2 {
   from {margin-left:    0%;}
   to   {margin-left: -100%;}
}

@-webkit-keyframes scroll2to3 {
   from {margin-left: -100%;}
   to   {margin-left: -200%;}
}

@-webkit-keyframes scroll1to3 {
   from {margin-left:    0%;}
   to   {margin-left: -200%;}
}

、もちろん逆にすることもできます。問題は、このプロセスが 3 つ以上のペインでは扱いにくいことです (コードの長さは、ペインの数に応じて二次関数的に増加します)。

それで...任意の数のペインに対してこれをどのように記述しますか?

編集: JavaScript を使用して CSS コードを生成できることは知っていますが、見逃したよりエレガントな方法があることを願っています。

4

1 に答える 1

0

これにキーフレームを使用することに夢中になっているかどうかはわかりません-キーフレームを使用するとより高度なアニメーションが可能になりますが、特定のスライドの例は単純なcssトランジションで実現できます.

.content{
  -webkit-transition:margin-left 1s ease-in-out;
  transition:margin-left 1s ease-in-out;
}

このルールは、margin-leftプロパティが変更されるたびにコンテンツ ブロックが 1 秒のイージング トランジションを使用することを示しています。これは、ユーザーが移動するたびに JavaScript で実行できます。

CSS トランジションの詳細については、webkit ブログを参照してください。

于 2012-05-21T03:57:09.580 に答える