animateModal.jsというプラグインを使用しています。
スマホのドロワーメニューを実装したのですが、
トリガーとなるOPENボタンをクリックした際に、
微妙な動作不良が起こることを確認しました。
普通にクリックして開け閉めすると問題ないのですが、
メニューが展開するアニメーションの途中で複数回素早くOPENボタンをクリックすると
opacityの値とz-indexの値が本来の値で固定されずに
OPEN時とCLOSE時が混じった状態で固定されてしまいます。
具体的には
1.OPENボタンをクリック
2.アニメーションしながらモーダル画面が表示される
3.2のアニメーションの途中でCLOSEボタンをクリックする
(あるいはOPENとCLOSEを素早く連打する)
4.すると本来閉じるはずのモーダルが閉じかけ?のような微妙な状態で止まってしまう
本来z-index:-9999(opacity:0)からz-indez:9999(opacity:1)へアニメーションするはずが、
z-index:-9999(opacity:1)という中途半端な状態で止まってしまっているようです。
添付の画像はanimateModalの本家サイトのデモで再現したものです。
OPENとCLOSEの位置が違うのでかなり苦労しましたが、
それでも複数回再現できたので、やっぱり起こり得る現象ということですね。
特にオプション設定のanimationDurationに時間をかけるほど起こりやすいです。
モーダルとして使うならば、OPENとCLOSEのボタン位置をずらすことで
このような現象はほぼ無視していいレベルだと思うのですが、
今回スマホのドロワーメニュー用に使用していて、ハンバーガーメニューで開閉が出来るようにしたので
OPENとCLOSEを簡単に連続でクリックできる環境が整ってしまっています。
既存のプラグインに対してどのように解決すればいいのか、まったくわからないのですが
A.アニメーション中はボタンをクリックできないようにする
B.z-index:-9999の時はopacity:1にならないようにする
C.モーダルOPEN時は、その他の要素をopacity:0にする
D.最悪の場合animationDurationを0にしてしまう(animateModalを使う意味が全くなくなるナ)
とかなら追加でjsを書くことでどうにか対処できるのかなぁと考えています。
が、具体的な方法はわからない!
ということで、どなたかjsに詳しい方、どうぞどうぞ具体的な解決策をお願いします!
回答1件
あなたの回答
tips
プレビュー