【Vue.js】モーダルが一瞬表示されてしまうちらつき現象の対処法

2019/12/28

こんにちは、ゆうや（@yuyaphotograph）です！

本記事では、Vue.jsで実装したモーダルがページアクセス時に一瞬だけ表示されてしまう現象をなおす方法をご紹介します。

先日、業務でモーダルを作った際に数分悩んだので同じ問題を抱える方の助けになれれば幸いです(^o^)

それでは参りましょう。

Vue.js モーダルのちらつき問題を解決しよう！
まとめ

Vue.js モーダルのちらつき問題を解決しよう！

モーダルのHTML構造

↓↓以下のようなモーダルがあったとします。

index.html

<div id="modal" class="modal-mask" v-if="opened">
  <div class="modal-wrapper" @click.self="close">
    <div class="modal-container">
      モーダルの中身
    </div>
  </div>
</div>

※本記事を見に来てくれた方は、ちらつき解決法を知りたい方だと思うのでCSSやJSは省略させていただきます。

v-cloakを使う

さっそくモーダルのちらつき問題をなおしていきましょう。

↓↓「v-cloak」というおまじないをモーダルのHTMLに追加してください。

index.html

<div id="modal" class="modal-mask" v-if="opened" v-cloak>
  <div class="modal-wrapper" @click.self="close">
    <div class="modal-container">
      モーダルの中身
    </div>
  </div>
</div>

CSSに３行書き足す

CSSに以下コードを追加して仕上げと参りましょう。

↓↓↓

index.css

[v-cloak] {
  opacity: 0;
}
/*もしくは*/
[v-cloak] {
  display: none;
}

「v-cloak」+ 「cssに3行書き足す」ことで、Vueインスタンスのコンパイルが終了するまでの間非表示となります！

超絶簡単ですね！！！

まとめ

以上、Vue.jsで実装したモーダルのちらつき問題をなおす方法をご紹介しました。

いかがだったでしょうか？

徐々に脱jQueryしていけたらいいなと思っている今日このごろです。

最後までご高覧いただきありがとうございました！