解析使用useDark(),發現transition 動畫失效

目錄

• 先上個示例
• 如果把代碼改一下
• 過渡效果

先上個示例

<template>
  <div>
      <button
       
@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 動畫失效的資料請關注其它相關文章！