本篇文章和大家了解一下使用useDark()发现transition 动画失效。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
计算
安全
数据库
网络和加速
企业服务
<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 动画失效的简略介绍，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注亿速云行业资讯频道哦！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://segmentfault.com/q/1010000043785052
