CSS HTML Javascript

アニメーションを設定する

個々のメニューも下からふわっとアニメーションさせていきます。

  • メニューのスタイル
  • メニューバーがクリックされたら
  • 個々のスタイル

メニューのスタイル

・ではこれまでで画面が切り替わる時間をゆっくりにするアニメーションを付けたので今度は細かいところまで設定していきます。

・今回は個々のメニューが下からふわっと一つずつ現れるようにしていきたいと思います。とりあえず同時に下からふわっと現れるようにスタイルを加えその後でタイミングを変えて表示するようにスタイリングを加えていきます。

・まず最初は透明で16px下にある状態にしておきます。liに対してopacityとtransformプロパティで初期値を作りましょう。値はそれぞれ0とtranslateY(16px);

としておきます。

メニューバーがクリックされたら

・次にメニューバーがクリックされたら.showというclassがつくように指定してあるのでshowがついた場合のスタイリングをしていきます。

・セレクタは.overlay.show li {}としておきましょう。

・これは単純に透明度を1に戻してあげるのとアニメーションをnoneに戻してあげればいいだけですね。

・こんな感じです。

.overlay.show li {

  opacity: 1;

  transform: none;

}

・そしたら普通のliの方にアニメーションを付けたいのでトランジション設定したいので透明度とトランスフォームに対して.3sでアニメーションしてもらいましょう。

・liはこんな感じですね。

.overlay li {

  margin-top: 24px;

  opacity: 0;

  transform: translateY(16px);

  transition: opacity .3s, transform .3s;

}

・ここまで来ると個々のメニューが3つ同時に下からふわっと現れるようなアニメーションができたと思います。

個々のスタイル

・最後にそれぞれのメニューを順番に表示されるようにしていきます。

・個々のメニューを選びたい場合:nth-child()を使って指定することができます。例えば一番目のメニューを指定してスタイルをしたい場合はセレクタは.overlay.show li:nth-child(1) {}としてあげるといいでしょう。

・そしてメニューを順番に表示したいのでtransition-delayを使うことによってその時間でアニメーションを始めることができます。なので.1s後にアニメーションを始めたい場合はtransition-delay: .1s;と書けばいいです。

・同様に3つともスタイルを書いていきましょう。こんな感じですね。

.overlay.show li:nth-child(1) {

  transition-delay: .1s;

}

.overlay.show li:nth-child(2) {

  transition-delay: .2s;

}

.overlay.show li:nth-child(3) {

  transition-delay: .3s;

}

-CSS, HTML, Javascript