ボタンをクリックしたら端からプロフィールが出てくるアニメーション

はじめに

ブログでよくある最初は隠れていてボタンを押すとプロフィールがヌッと出てくるアニメーションを作りました。
最初からプロフィールを表示しているサイトもありますが、トップページの面積を大きく使いたいときに便利です。

ポイント

・端から出したい要素を画面の外に隠す

.profile{transform: translateX(-100vw);} //左に隠す場合
.profile{transform: translateX(100vw);} //右に隠す場合

transformを使ってCSSだけで隠すとjQueryでhideやfadeOutを書く手間が省けます。

・隠した要素を表示するためのclassを記述

.profile.active{transform: translateX(0%);}

transformで画面の外に隠した要素のtranslateXを0%にすることで画面内に表示させることが可能です。
このあとアニメーションを出し入れするためにjQueryでtoggleClassメソッドを使うので、出し入れ用のクラスをactiveと命名してます。
ちなみにSCSSを使用する場合、入れ子の中にいれると動作してくれなくなるので僕はこのコードだけ入れ子の外に書いています。なんでかは分かりません。今度調べます。

・toggleClassメソッドで出し入れ

ボタンをクリックしたら先程のactiveクラスのstyleをprofileクラスに追加、追加されている状態でもう一度押したらactiveクラスが消える動作をtoggleClassメソッドで書きます。

jQuery(function ($) {
  $(".profileButton").on("click", function () {
    $(".profile").toggleClass("active");
  });
});

ただ、このままではヌッというよりボンッという感じなので、profileクラスに

.profile{transition: all 0.3s linear;}

こうすればOKです。
残りの詳しい設定はCodepenでご確認ください。

See the Pen GRZmZVV by hato0317 (@hato0317) on CodePen.