欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解析使用useDark(),發(fā)現(xiàn)transition?動(dòng)畫失效

 更新時(shí)間：2023年05月14日 08:54:27   作者：changli  
這篇文章主要為大家介紹了使用useDark(),發(fā)現(xiàn)transition動(dòng)畫失效的示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

先上個(gè)示例

<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>

上面這段代碼在點(diǎn)擊按鈕時(shí)不會(huì)出現(xiàn)背景顏色的過(guò)渡效果

如果把代碼改一下

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

過(guò)渡效果

這個(gè)時(shí)候才會(huì)有過(guò)渡效果。

useDark() 讓 html 元素添加了 dark 類名,如果不用 useDark(),通過(guò)下列的方式

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

也是有過(guò)渡效果的。

對(duì)于為什么用 useDark() 會(huì)導(dǎo)致過(guò)渡效果失效,一直找不到原因,有知道的嗎?

以上就是解析使用useDark(),發(fā)現(xiàn)transition 動(dòng)畫失效的詳細(xì)內(nèi)容，更多關(guān)于useDark() transition 動(dòng)畫失效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論