解析使用useDark(),发现transition 动画失效
更新时间：2023年05月14日 08:54:27 作者：changli
这篇文章主要为大家介绍了使用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 动画失效的详细内容，更多关于useDark() transition 动画失效的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue观察模式浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
el-select 数据回显,只显示value不显示lable问题
这篇文章主要介绍了el-select 数据回显,只显示value不显示lable问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
下面小编就为大家带来一篇Vue-router路由判断页面未登录跳转到登录页面的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了vue中的非父子间的通讯问题简单的实例代码,需要的朋友可以参考下2017-07-07
vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用，今天通过本文给大家介绍移动端调试神器vConsole使用，感兴趣的朋友一起看看吧2022-04-04
这篇文章主要介绍了浅谈vue.watch的触发条件是什么？具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
element-plus el-form表单验证使用方法以及注意事项
这篇文章主要给大家介绍了关于element-plus el-form表单验证使用方法以及注意事项的相关资料,表单验证能通过设置验证规则验证用户的输入,并对不规范的输入做出对应提示,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要给大家介绍了关于vue使用echarts图表自适应的几种解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要为大家详细介绍了Vue计算属性的学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要为大家详细介绍了Vue利用Blob下载原生二进制数组文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最新评论