mayy

Blog

CSS3アニメーションとJSでスライドトグル

カテゴリー
CSS3
タグ
,
CSS3アニメーションとJSでスライドトグル

今までjQueryでさくっと作っていたんですが、スマホで見た時CSS3のアニメーションのほうが滑らかに見えるので書き換えてみました。

概要

とても簡単です。
JSでclassを制御し、CSSのtranstionでアニメーションさせています。

CSSの設定

アコーディオンするところのCSSは以下のような感じです。
必要に応じてベンダープレフィックスを追加してください。

transitionですが、左から
・アニメーションの対象(今回高さを変えるだけなのでmax-heightのみ)
・アニメーションにかける時間
・アニメーションのイージング(ease:開始と終了を滑らかに)

#slide{
  width: 80px;
  height: auto;
  max-height: 0;
  padding: 10px;
  background-color: #888888;
  transition: max-height 0.5s ease;
}
.show{
  max-height: 80px;
}

閉じたり開いたりするJS

onclick直で書いていますが好きに書いてください。
#sliderの要素にclassを追加、削除してアニメーションさせています。

<button onclick=”document.getElementById(‘slider’).classList.toggle(‘show’);” >開閉ボタン</button>

完成

jQueryのslideToggleと同じ動きをしますが、スマホだとこっちのほうが少し滑らかに動くはずです。
特に難しいところもなく、またこれからCSS3のアニメーションが盛んに使われるようになると考えると覚えておいて損はないと思いました。

カテゴリー

タグクラウド