[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS（アニメーションの順送り・逆戻りシーケンス）

トップメニューバーは、検索ボックスに配置され、一般的なシナリオですが、検索機能が頻繁に使用されていない場合は、メニューバーの内容が既に混雑している間、その後、フル検索ボックスを置くことはとても美しく見えません。そこで、次の図のように、検索アイコンだけを置いて、必要なときに検索ボックス全体を表示させるというのもよくある方法です。

実装のアイデア

開始状態では検索ボックスが表示されず、マウスオーバー後に右からスライドして表示されます。 overflow: hidden 親要素の {{code overflow: hidden /code} を使って非表示にし、入力ボックスを親要素の表示範囲外に移動し、必要なら元に戻す必要があります。

CSSには transition と animation ここでは、検索ボックスの位置の移動、アイコンの透明度の変更という2つのシンプルな効果しかないので、アニメーション効果を得るための2つの方法は transition で十分です。

この2つのアニメーション自体は簡単に実装できますが、いくつか細かい点があります。

• この2つのアニメーションは同時ではなく、順次に行われるため transition-delay 2つのエフェクトのシーケンスを実現するために
• 表示と非表示の2つの処理は全く同じように見えますが、よく見ると、表示時はアイコンが先に消え、後から検索ボックスが移動し、非表示時は検索ボックスが先に消え、後からアイコンが現れるというように、アニメーションの順番が違っています。なので、別々に設定する必要があります。

コードの実装

スタイルシート全体はこの記事の最後に添付されているので、正確なアイデアを見たくない場合は、このセクションをスキップしてコピーすることができます。

基本スタイル

まず、ベースとなるスタイルを汎用的に書いてみましょう。 マテリアルデザインアイコン .

<div class="search">
  <input class="bar" placeholder="Please enter content" />
  <span class="material-icons icon">search</span>
</div>
.icon {
  width: 24px;
  height: 24px;
}

.bar {
  height: 26px;
  width: 200px;
  padding: 1px 9px;
  border: #fff 1px solid;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
}
::placeholder {
  color: #ccc; /* modify the color of the placeholder in input *}

.search {
  height: 30px;
  display: flex;
  align-items: center;
}

検索ボックスの非表示

検索ボックスを移動させる方法はたくさんあります。例えば、絶対位置や相対位置を使用することができます。

• 検索ボックスが絶対位置指定に設定されている場合( position: absolute ) の場合、検索ボックスは入力ストリームから引き出され、親要素は存在しないかのようにレンダリングされるため、親要素の幅と検索アイコンの位置は追加で指定する必要があります。
• これに対して、相対的な位置決め( position: relative ) は、他の要素に影響を与えることなく、単純に要素の位置を移動させるので、ここではより簡単に使用できます。

また、もっと簡単な方法もあります。 変換属性 . この属性を用いると、他の要素に影響を与えずに、パン、回転、拡大縮小などの変形が可能になります。この属性は translateX() 属性は、X軸方向（水平方向）に指定された距離だけ要素を平行移動させるものである。平行移動だけなら、相対的な位置決めを使うのと効果は大きく変わりません。 その

[...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]