【Jquery】検索フォームのアニメーションの実装方法 - さかいの気ままにプログラミング日記

おはようございます。
一年の半分が過ぎましたが、2020年いい年だったと思えるように全力でがんばっていきます！！
今回はボタンを押したら検索フォームがフワッと現れて、画面をクリックするとフワッと消える機能を実装していきたいと思います。イメージは下のような感じです。
https://gyazo.com/be1f61ffdf08372e7459ba517b8c6c28

前提

ページのコーディングが完了していること

実装の流れ

①　検索フォームにアニメーション用のクラスをつける
②　CSSで初期設定を行う
③　JavaScriptで動きをつける

以上の3点になります。以前の記事を応用すればあっさり実装できます。

https://shun-0211.hatenablog.com/entry/2020/06/13/114332

①　検索フォームにアニメーション用のクラスをつける

動きをつけたい要素に対してクラスをつけます。（付けなくても実装できますが、分かりやすくするためつけてます。）

%form.header__main__search.fadeInDown     # クラス名を追記

②　CSSで初期設定を行う

ページを読み込んだ際のスタイリングをします。

.fadeInDown{
  opacity : 0;    
  transform: translateY(-10px);
  transition: 1s;
}

opacityプロパティで不透明度を0にして、フォームを見えなくします。そしてtransformプロパティで要素をY方向へ10px移動しておきます。
また、transitionプロパティにて時間変化を指定します。
※　transitionプロパティ：transition効果（時間的変化）をまとめて指定する際に使用する。

これで終わりではありません。このままでは検索フォームは見えないだけで存在しているので、カーソルをあわせてクリックすると反応してしまいます。そこで、formにdisabled属性を追加して無効化します。

%input.header__main__search__form{name: "search", type: "text", placeholder: "SEARCH", disabled: 'disabled'}     # disabled属性追加

③　Javascriptで動きをつける

最後にJavascriptを書いていきます。ここでの動きは２種類に分けられます。
１　検索ボタンをクリックした際に検索フォームが現れる動き
https://gyazo.com/4ae4c0593b6a6404fbcb55828c79c68b

２　検索フォームが現れている状態で画面をクリックした際、検索フォームが消える動き
https://gyazo.com/8ee7bce42d5cf06df4d79c9fbea9b5c4

検索フォームの動きに加えてロゴやログインなどのボタンも透明度を変化させています。

function(){
# １　検索ボタンをクリックした際に検索フォームが現れる動き
  $(".search__button").on('click', function(){
    $(".fadeInDown").css('opacity', '1');
    $(".fadeInDown").css('transform', 'translateY(0)');
    $(".header__main__button__nav").css('opacity', '0.1');     # ナビゲーションの透明度を上げる
    $(".header__main__logo").css('opacity', '0.1');     # ロゴの透明度を上げる
    $(".header__main__search__form").prop('disabled', false)     # disabled属性をfalseにし、フォームの無効化を解除
  })

# ２　検索フォームが現れている状態で画面をクリックした際、検索フォームが消える動き
  $(document).on('click', function(e){
    if($(e.target).is('.fa-search, .header__main__search__form')) {
    }else{
      $(".header__main__logo").css('opacity', '1');
      $(".header__main__button__nav").css('opacity', '1');
      $(".fadeInDown").css('opacity', '0');
      $(".fadeInDown").css('transform', 'translateY(-10px)');
      $(".header__main__search__form").prop('disabled', true);     # disabled属性をtrueにし、再度フォームを無効化
    }
  })
}

１は単純に検索ボタンをクリックしたときの処理を書いているのみになります。
２では画面がクリックされたときif以下の関数が走ります。中身としてはイベントが走った要素を取得し、それが検索フォームもしくは検索ボタンでなければ下の関数を実行します。これにより、画面をクリックした際のフォームの動きを実行できます。

(補足) function(e)

　function(e)のeはイベントオブジェクトのことで、イベントハンドラー及びイベントリスナーにおいて実行される関数の引数として受け取ることのできるオブジェクトです。そのイベントオブジェクトから発生したイベントに関する様々な情報（プロパティ）を知ることができ、またそのイベントを制御するメソッドを活用することができる。

参考
https://noumenon-th.net/programming/2017/06/24/eventobject/

以上になります。ここまで読んでくださり、ありがとうございました。分かりにくいやアドバイス等ありましたらコメントくださると幸いです。では！