アニメーションによるタブ切り替えの実装方法

今回は、アニメーションによるTAB切り替えの実装方法と、アニメーションによるTAB切り替えを実装するための注意事項について説明します。実際のケースを見てみましょう。

デザイナーはタブ切り替えのレンダリングを提供しました。小さな機能ではありますが、フロントエンドエンジニアが実装する際に注意すべき点はまだたくさんあります。参考までにデモを書きました。

最終的な効果は次のとおりです:

GIFアニメーションで詳細を表示するために、アニメーション時間を3秒に延長しました

実装アイデア

垂直線は垂直ではないため、間隔をあけました, そのため枠線は使用できません。擬似要素を使ってみます。

縦棒は 3 本しかありませんが、li は 4 つあります。これは単純で、:not(

:first-child) セレクターを使用して選択できます。

小さいものから大きいものへの効果を持たせたいので、背景色を直接使用してそれを実現することはできません。

疑似要素のサイズで制御すると計算が複雑になるのでbox-shadowを使って実現したいと思います。

それでは、次のようにコードを書き始めましょう:

HTML コード

  <p class="m">
    <ul class="tab">
      <li><a href="">导航1</a></li>
      <li><a href="">导航2</a></li>
      <li><a href="">导航3</a></li>
      <li><a href="">导航4</a></li>
    </ul>
  </p>

上記のコード構造は以前に書いたものなので、何も調整しません。面倒なコードはありません。

CSS コード

.m { margin: 100px; }
.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }
.tab li { float: left; width: 100px; position: relative; overflow: hidden; }
.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.tab li:before, .tab li:after { content: ""; display: block; }
.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }
.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.tab li:hover a { color: #fff; }
.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }
.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

コード分析:

アニメーションの実装は非常に簡単で、transition 属性を使用するだけです。

独自の擬似要素と次の兄弟要素の擬似要素を制御するには、+ セレクターを使用するだけです。

他のコードは比較的明確でシンプルなので、自分で分析できます。

この効果を達成するのは非常に簡単で、毎日の蓄積とさまざまなパラメータの柔軟な組み合わせに重点が置かれています。実装方法を考えて最終的にコードを書くまでがとても早いです。そしてそこには高度な知識はありません。

CSS が難しい理由は、CSS を知らないからではなく、CSS を一致させる方法を知らないからです。

実際には、まだデザイン効果の 99% しか復元されていません。2 つの分割線のうち 1 つは背景の内側にあり、もう 1 つは背景の外側にあります。2 つの分割線を背景の内側に配置したい場合は、どうすればよいですか。それ？考えてみてください。

アドバンテージSCSS。上記のCSSがコンパイルされました。実際、scss を使用して実装すると非常に便利で高速であり、コードも読みやすくなります。

デモは次のとおりです:

.m {
  margin: 100px;
}
.tab {
  width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px;
  background: $cff;border-radius: 10px;overflow: hidden;
  li {
    float: left;width: 100px;position: relative;overflow: hidden;
    &:before,&:after,a {@include dz();}
    &:before,&:after {
      content: "";display: block;
    }
    &:not(:first-child) {
      &:after {
        background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute;
      }
    }
    a {
      display: block;position: relative;z-index: 2;color: $c00;font-size: 14px;
    }
    &:before {
      width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;
    }
    &:hover {
      a {color: $cff;}
      &:before {
        box-shadow: 0 0 0 100px $cyan;
      }
      & + li:after,&:after {
        height: 0;top: 20px;
      }
    }
  }
}

もちろん、このコードではカラー変数と mixin コードを使用しました。直接使用することはできません。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS3 でのポインターイベントの使用の詳細な説明

focus-within の使用の詳細な説明

以上がアニメーションによるタブ切り替えの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。