解析使用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.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。这篇文章给大家带来了Vue.js 使用 Vee-validate 实现表单校验的相关知识，感兴趣的朋友一起看看吧2019-04-04
Vue.js 3 和 Vue.js 2 是两个主要版本的流行前端框架,它们之间有很多区别,包括性能优化、新特性和改进的API等,下面就跟随小编一起来看看他们的使用区别吧2024-01-01
这篇文章主要介绍了Vue中使用h5 Plus的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了浅谈Vue CLI 3结合Lerna进行UI框架设计,在此之前先简单介绍一下Element的构建流程，以便对比新的UI框架设计。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了Vue.js刷新当前页面的常见方法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-12-12
在使用Vue框架开发Web应用时,倒计时功能是一个常见的需求,它可以在一定时间内重复执行某些操作,比如防止用户重复提交表单、限制投票次数、实现验证码获取等功能,所以本文给大家介绍了Vue3动态倒计时的代码实现,需要的朋友可以参考下2024-09-09
在V8中，JavaScript的内存空间分为栈（Stack）和堆（Heap）两部分，垃圾回收的基本思路是：查找内存中的所有变量，看哪些已经不再需要，然后释放这些变量所占用的内存，本文就给大家梳理一下V8垃圾回收系统,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue微信分享链接添加动态参数的实现方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
这篇文章主要为大家介绍了vue修饰符v-model及.sync原理及使用区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue-router路由懒加载及实现方式,路由懒加载的主要作用是将 路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候，才会加载对应组件的代码块，需要的朋友可以参考下2022-12-12
最新评论