时间戳

首页 > 解决方案 > 主题之间的 jQuery 过渡（切换主题时）

javascript - 主题之间的 jQuery 过渡（切换主题时）

问题描述

我有这个：

<html lang="en" theme="dark">

和这个：

html {
  &[theme='light'] {
    --bg: #ffffff;
    --title: #6822c4;
    --sub-title: #000000;
    --text: #ffffff;
  }
  &[theme='dark'] {
    --bg: #17171F;
    --title: #4578a5;
    --sub-title: #acacac;
    --text: #ffdddd;
  }
}

和这个：

$('#myCheckBox').change(function() {
    if ($(this).is(':checked')) document.documentElement.setAttribute('theme', 'dark')
        else document.documentElement.setAttribute('theme', 'light')
});

这工作得很好但是没有过渡，所以我想知道我是否可以用 jQuery 处理一些东西，比如 fadeOut 之类的？

标签： javascriptjquerycssthemestransition

解决方案

你必须在你的CSS中添加过渡

$('#myCheckBox').change(function() {
    if ($(this).is(':checked')) $('html').attr('theme', 'dark')
        else $('html').attr('theme', 'light')
});
  html body {
    transition-property: background-color;
    transition-duration: 1.5s;
  }
  html[theme='light'] body {
    background: #ffffff;
  }
  html[theme='dark'] body {
    background: #17171F;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en" theme="dark">
  <body>
    <input type="checkbox" id="myCheckBox" value="1" checked>
  </body>
</html>

推荐阅读