説明#
数日前、Vue でホームページを作成しているときに、useDark を使ってダークモードを実現しようと思ったのですが、使用中に面白い問題に直面しました。それは、スライダーのトグルを使ってダークモードを制御しているときに、スライダーのトランジション効果が無効になっていることに気づいたのです。なぜでしょうか？ transition が無効になっているため、トランジション効果がなくなってしまいました。
原因 / 解決策#
こちらをクリックすると ソースコードを確認できます
いろいろ調べた結果、この Issuesで問題の原因を見つけました。無効になったのは、userColorMode が変更を処理する際に、最初に transition を無効にし、その後無効を解除したためです。useDark を作成する際に、options の disableTransition が transition を無効にするもので、そのデフォルト値は true です。これが原因でトランジションアニメーションがなくなってしまいました。したがって、disableTransition に false を渡すことで解決できます。
const isDark = useDark({ disableTransition: false })
プロジェクトではこのように使用できます：
これで完了です。また次回お会いしましょう！