使用useDark()解析时，为何transition动画失效了？

本文共计385个文字，预计阅读时间需要2分钟。

目录 + 示例 + 如将代码稍作修改 + 过渡效果 + 示例 + template + div + class=theme-change + button + class=switch + @click=toggleTheme + role=switch + aria-label=切换暗色主题 + :class={ k: isDark } + 按钮 + /button + /div

目录

• 先上个示例
• 如果把代码改一下
• 过渡效果

先上个示例

<template> <div class="theme-change"> <button class="switch" @click="toggleTheme" role="switch" aria-label="切换暗色主题" :class="{ k: isDark }" > 按钮 </button> </div> </template> <script setup lang="ts"> const isDark = useDark(); function toggleTheme() { isDark.value = isDark.value ? false : true; } </script> <style scoped lang="scss"> .theme-change { .switch { transition: all 3s; background: green; } } .k.switch { background: red; } </style>

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

如果把代码改一下

// 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 动画失效的资料请关注易盾网络其它相关文章！