快捷導(dǎo)航

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

更新時(shí)間：2023年05月14日 08:54:27 作者：changli

這篇文章主要為大家介紹了使用useDark(),發(fā)現(xiàn)transition動(dòng)畫(huà)失效的示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(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)畫(huà)失效的詳細(xì)內(nèi)容，更多關(guān)于useDark() transition 動(dòng)畫(huà)失效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vue.js + Nuxt.js 項(xiàng)目中使用 Vee-validate 表單校驗(yàn)
vee-validate 是為 Vue.js 量身打造的表單校驗(yàn)框架，允許您校驗(yàn)輸入的內(nèi)容并顯示對(duì)應(yīng)的錯(cuò)誤提示信息。這篇文章給大家?guī)?lái)了Vue.js 使用 Vee-validate 實(shí)現(xiàn)表單校驗(yàn)的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2019-04-04
詳解Vue2和Vue3的區(qū)別以及其鉤子函數(shù)的使用
Vue.js?3?和?Vue.js?2?是兩個(gè)主要版本的流行前端框架,它們之間有很多區(qū)別,包括性能優(yōu)化、新特性和改進(jìn)的API等,下面就跟隨小編一起來(lái)看看他們的使用區(qū)別吧
2024-01-01
Vue中使用h5 Plus的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中使用h5 Plus的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì)
這篇文章主要介紹了淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì),在此之前先簡(jiǎn)單介紹一下Element的構(gòu)建流程，以便對(duì)比新的UI框架設(shè)計(jì)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
Vue.js刷新當(dāng)前頁(yè)面的常見(jiàn)方法
這篇文章主要介紹了Vue.js刷新當(dāng)前頁(yè)面的常見(jiàn)方法,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-12-12
Vue3動(dòng)態(tài)倒計(jì)時(shí)的代碼實(shí)現(xiàn)
在使用Vue框架開(kāi)發(fā)Web應(yīng)用時(shí),倒計(jì)時(shí)功能是一個(gè)常見(jiàn)的需求,它可以在一定時(shí)間內(nèi)重復(fù)執(zhí)行某些操作,比如防止用戶重復(fù)提交表單、限制投票次數(shù)、實(shí)現(xiàn)驗(yàn)證碼獲取等功能,所以本文給大家介紹了Vue3動(dòng)態(tài)倒計(jì)時(shí)的代碼實(shí)現(xiàn),需要的朋友可以參考下
2024-09-09
一文帶你搞懂V8垃圾回收系統(tǒng)
在V8中，JavaScript的內(nèi)存空間分為棧（Stack）和堆（Heap）兩部分，垃圾回收的基本思路是：查找內(nèi)存中的所有變量，看哪些已經(jīng)不再需要，然后釋放這些變量所占用的內(nèi)存，本文就給大家梳理一下V8垃圾回收系統(tǒng),需要的朋友可以參考下
2023-07-07
vue實(shí)現(xiàn)微信分享鏈接添加動(dòng)態(tài)參數(shù)的方法
這篇文章主要介紹了vue微信分享鏈接添加動(dòng)態(tài)參數(shù)的實(shí)現(xiàn)方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-04-04
vue修飾符v-model及.sync原理及區(qū)別詳解
這篇文章主要為大家介紹了vue修飾符v-model及.sync原理及使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue路由的懶加載深入詳解
這篇文章主要介紹了vue-router路由懶加載及實(shí)現(xiàn)方式,路由懶加載的主要作用是將?路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊，只有在這個(gè)路由被訪問(wèn)到的時(shí)候，才會(huì)加載對(duì)應(yīng)組件的代碼塊，需要的朋友可以參考下
2022-12-12