CSSで検索ボックスを非表示にする機能を実装します（アニメーション順方向と逆方向のシーケンス）

上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用されておらず、メニュー バーのコンテンツがすでに混雑している場合は、そこに完全な検索ボックスを配置しても見た目があまり美しくありません。したがって、次の図に示すように、検索アイコンのみを配置し、必要なときに検索ボックス全体を表示するのが一般的です。

実装のアイデア

検索ボックスは初期状態では表示されません。マウスが移動すると右からスライドインします。そのため、検索ボックス自体のhidden属性やtransparency属性は使用できません。親要素のoverflow: hidden使用して非表示にし、入力ボックスを親要素の表示範囲外に移動させ、必要に応じて元に戻す必要があります。

CSS でアニメーション効果を実現するには、 transitionとanimation 2 つの方法があります。ここでは、検索ボックスが移動し、アイコンの透明度が変化するという 2 つの単純な効果しかないため、 transitionで十分です。

これら 2 つのアニメーションの実装はシンプルですが、いくつか細かい点があります。

• 2 つのアニメーションは同時に実行されるのではなく、順番に実行されます。2 つの効果のシーケンスを実現するには、 transition-delayを使用する必要があります。
• 表示と非表示の 2 つのプロセスはまったく同じに見えますが、よく見るとアニメーションの順序が異なることがわかります。表示の場合は、最初にアイコンが消えて検索ボックスが移動します。非表示の場合は、最初に検索ボックスが移動して、後からアイコンが表示されます。そのため別途設定が必要となります。

コードの実装

完全なスタイルシートは記事の最後に添付されています。具体的なアイデアを読みたくない場合は、このセクションをスキップして直接コピーできます。

基本スタイル

まずは基本的なスタイルから始めましょう。ここで使用されているアイコンはマテリアル デザインのアイコンです。

<div class="検索">
  <input class="bar" placeholder="コンテンツを入力してください" />
  <span class="material-icons icon">検索</span>
</div>
.アイコン {
  幅: 24px;
  高さ: 24px;
}

。バー {
  高さ: 26px;
  幅: 200ピクセル;
  パディング: 1px 9px;
  境界線: #fff 1px 実線;
  境界線の半径: 3px;
  背景色: 透明;
  色: #fff;
}
::プレースホルダー{
  color: #ccc; /* 入力内のプレースホルダーの色を変更します*/
}

。検索 {
  高さ: 30px;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
} 

検索ボックスを非表示

検索ボックスを移動するには、絶対位置や相対位置を使用するなど、さまざまな方法があります。

• 検索ボックスが絶対position: absolute ）に設定されている場合、検索ボックスは入力ストリームから抽出されます。簡単に言えば、親要素は存在しないかのようにレンダリングされます。このように、親要素の幅と検索アイコンの位置は個別に指定する必要があります。
• 対照的に、相対配置 ( position: relative ) は、他の要素に影響を与えずに要素の位置を移動するだけなので、ここで使いやすくなります。

より直接的な方法として、 transform プロパティもあります。このプロパティを使用すると、他の要素に影響を与えずに、要素の移動、回転、スケーリングなどの変換操作を実装できます。ここで使用されるtranslateX()属性は、要素を X 軸に沿って指定された距離 (水平方向) に移動します。翻訳の観点からのみ見ると、相対的な配置を使用する場合と比較して効果に明らかな違いはありません。

追記: transition、transform、translate の違いが分からないのは私だけではないはずです。

。検索 {
  オーバーフロー: 非表示;
}
。バー {
  変換: translateX(224px);
  /* 
    前の文は、同じ効果の位置: relative; を持つ次の 2 つの文に置き換えることもできます。
    左: 224px;
  */
}

アニメーションシーケンス

アニメーションは transition プロパティを通じて実現されます。 transition は、transition-property、transition-duration、transition-timing-function、および transition-delay の略語です (例: border: red 1px solid; )。4 つのプロパティは、それぞれトランジション アニメーションの継続時間、タイミング カーブ、および遅延時間を指定します。

• プロパティは、遷移アニメーションが適用されるプロパティです。
• 時間カーブとは、最初はゆっくり、途中で速く、最後はゆっくりといったアニメーションの速度変化のことです。均一な動きよりも見栄えがよく、滑らかになります。
• 遅延時間は、トリガー条件が満たされた後、一定時間アニメーションを遅延させるものです。複数のアニメーションを順次実行するために使用できます。

トランジション属性は、基本的には小学校のコンピュータの授業で習った Flash トゥイーン アニメーションです。属性の開始状態と終了状態を指定し、その間のトランジション アニメーションを自動的に完了します。要素の元の属性は開始状態、マウスが移動した後のアニメーション、自然な要素の:hover疑似クラス属性は終了状態です。

.アイコン {
  不透明度: 1;
  transition: opacity 0.3s easy; /* delay プロパティのデフォルト値は 0 です */
}
.search:hover .icon {
  不透明度: 0;
}

。バー {
  変換: translateX(224px);
  遷移: transform 0.3s、ease-in-out 0.3s;
}
.search:hover .bar {
  変換: translateX(24px);
}

逆順

基本的には、目的のアニメーション効果を実現できますが、検索ボックスが非表示になっている場合は、最初にアイコンが表示され、検索ボックスの後にスライドアウトするため、美しさが足りません。解決策も非常に簡単で、ホバー疑似クラスに異なる遅延属性を設定するだけです。

注目すべき点は、ホバー疑似クラスの delay 属性はマウスが上に移動したときの遅延に対応し、要素自体の属性の delay はマウスが外に出たときのアニメーション再開の遅延に対応することです。最初の反応と同じではないかもしれませんが（よく考えれば意味がわかります）、逆に書かないでください。

.アイコン {
  遷移: 不透明度 0.3 秒、緩和 0.3 秒;
}

.search:hover .icon {
  遷移遅延: 0秒;
}

。バー {
  遷移: transform 0.3s、ease-in-out 0s;
}

.search:hover .bar {
  遷移遅延: 0.3秒;
}

トリガーエリア

実際、上記の手順で目的のアニメーション効果が得られます。しかし、まだ小さな問題が残っています。アニメーションは親要素 .search のホバー状態によってトリガーされるため、マウスが検索ボックスがあるはずの検索アイコンの左側 (現在は何もなく、非表示になっています) に移動すると、検索ボックスを表示するアニメーションがトリガーされます。これは実際には受け入れられないことではありません。

マウスがアイコンの上に移動したときのみアニメーションをトリガーしたい場合は、トリガー条件を .icon のホバー状態に変更するだけです。ただし、CSS には後続要素セレクターしかなく、先行要素セレクターがないため (DOM レンダリング CSS の原則ではバックトラックが発生しないため)、HTML でアイコンと検索ボックスの順序を調整する必要があります。

<div class="検索">
  <span class="material-icons icon">検索</span>
  <input class="bar" placeholder="コンテンツを入力してください" />
</div>

次に、対応するスタイルとセレクターを変更します。

.icon:hover {
  不透明度: 0;
  遷移遅延: 0秒;
}

.icon:hover + .bar { /* + 隣接兄弟セレクター*/
  変換: translateX(24px);
  遷移遅延: 0.3秒;
}

。検索 {
  ディスプレイ: フレックス;
  flex-direction: row-reverse; /* 検索ボックスをアイコンの左側に残す*/
}

付録: 完全なスタイルシート

<div class="検索">
  <span class="material-icons icon">検索</span>
  <input class="bar" placeholder="コンテンツを入力してください" />
</div>
.アイコン {
  幅: 24px;
  高さ: 24px;
  不透明度: 1;
  遷移: 不透明度 0.3 秒、緩和 0.3 秒;
}

.icon:hover {
  不透明度: 0;
  遷移遅延: 0秒;
}

。バー {
  高さ: 26px;
  幅: 180ピクセル;
  パディング: 1px 9px;
  境界線: #fff 1px 実線;
  境界線の半径: 3px;
  背景色: 透明;
  色: #fff;
  変換: translateX(224px);
  遷移: transform 0.3s、ease-in-out 0s;
}

.icon:hover + .bar {
  変換: translateX(24px);
  遷移遅延: 0.3秒;
}

::プレースホルダー{
  色: #ccc;
}

。検索 {
  高さ: 30px;
  ディスプレイ: フレックス;
  flex-direction: 行を反転します。
  アイテムの位置を中央揃えにします。
  オーバーフロー: 非表示;
}

CSSを使用して隠し検索ボックス機能（アニメーション順方向と逆方向シーケンス）を実装する方法についての記事はこれで終わりです。より関連性の高いCSSアニメーション順方向と逆方向シーケンスのコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援してください。