2020年11月12日木曜日

ボタンをクリックした時にアニメーションを付ける

ボタンをクリックした時に、指定したアニメーションを付ける。

デモページを表示

CSS

補足
  • クリックした時に設定するアニメーションのクラス( bounce, rubberBand, tada)を用意しておく。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足
  • クリックした時に data-click-animation 属性に設定したアニメーションのクラスを追加し、アニメーションが終了したら追加されたクラスを削除する。
  • デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足
  • クリックされた時のアニメーションを data-click-animation 属性に指定する。

関連投稿