IT俱乐部 JavaScript 解析使用useDark(),发现transition 动画失效

解析使用useDark(),发现transition 动画失效

先上个示例

const isDark = useDark(); function toggleTheme() { isDark.value = isDark.value ? false : true; } .theme-change { .switch { transition: all 3s; background: green; } } .k.switch { background: red; }

上面这段代码在点击按钮时不会出现背景颜色的过渡效果

如果把代码改一下

// const isDark = useDark();
const isDark = ref(false);

过渡效果

这个时候才会有过渡效果。

useDark() 让 html 元素添加了 dark 类名,如果不用 useDark(),通过下列的方式

// const isDark = useDark();
const isDark = ref(false);
function toggleTheme() {
  document.documentElement.classList.toggle('dark')
  isDark.value = isDark.value ? false : true;
}

也是有过渡效果的。

对于为什么用 useDark() 会导致过渡效果失效,一直找不到原因,有知道的吗?

以上就是解析使用useDark(),发现transition 动画失效的详细内容,更多关于useDark() transition 动画失效的资料请关注IT俱乐部其它相关文章!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/8173.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部