isYangs

isYangs

热爱写代码,因为每一行都是我的作品!
github
email

在Vue中使用useDark时遇到的问题

描述#

前两天在用 Vue 写一个主页的时候,想着用 useDark 来实现深色模式,但是在使用的时候遇到了一个有趣的问题,就是在使用滑块开关来控制深色模式的时候,发现滑块开关的过渡效果失效了,这是为什么呢? 因为 transition 失效了,所以就没有了过渡效果。

原因 / 解决方案#

可以点击这里 去看看源码

经过一番查找,在这个 Issues 中找到了问题原因,失效是因为 userColorMode 在处理改变的时候,先禁用 transition 再取消禁用导致的。在创建 useDark 的时候,options 中的 disableTransition 就是禁用 transition,它的默认值是 true,所以就导致没有过渡动画了。那么默认传入 disableTransition 为 false 的值就可以了。

const isDark = useDark({ disableTransition: false })

项目中可以这样使用:
code.png

好了大功告成,下次见!

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。