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

网络编程 useDark() transition 动画失效,useDark transition 06-18

先上个示例

<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 动画失效的详细内容

编辑：一起学习网

标签：效果,按钮,代码,才会,找不到