MENU

ポップアップアニメーションを仕上げよう

透明にしたポップアップの下に配置した要素をクリックできるようにしていきます。

  • button要素の配置
  • pointer-eventsの設定

button要素の配置

・今まで作ってきたポップアップでほとんど完成しているのですが消えたメッセージはページ上の要素として残ってしまうという弱点があります。

・つまりもしその消えた要素の下に更にクリックしたい要素があった場合ポップアップが邪魔でクリックできないということがあります。

・以前作ったボタンを流用してポップアップが消える位置に絶対配置してみるとポップアップが消えた後もクリックができないようになっているのがわかります。

pointer-eventsの設定

・これを直すためにはポップアップが終わったらマウスイベントを反応しないようにしてあげる必要があります。

・やり方は簡単で@keyframes popupの100%の設定にpointer-eventsプロパティを設定してあげればおkです。マウスイベントに反応させたくないので値はnone;としておきましょう。

-広告-

 

 






JavaScript

この記事が気に入ったら
いいね または フォローしてね！

Follow Me
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次