小编76 *_* 79的帖子

因此，我正在使用 tailwindCSS 构建一个小型项目，并考虑实现黑暗模式。我制作了一个按钮并将其映射以将dark类放入 html 标记中。经过一番测试后，我意识到切换看起来有点奇怪，因为它是瞬时发生的。有没有办法将过渡持续时间或计时函数应用于此更改？

这是我处理更改的基本逻辑（我也使用 vue）：

<template>
  <!-- <span class="material-icons">&#xE51C;&#xE518;</span> -->
  <input @click="darkClassToggle" id="toggle" class="toggle" type="checkbox" />
</template>

<script>
export default {
  name: "darkModeToggle",
  methods: {
    darkClassToggle() {
      const toggle = document.querySelector(".toggle");
      const html = document.firstElementChild;
      if (toggle.checked) {
        html.classList.remove("dark");
      } else {
        html.classList.add("dark");
      }
    },
  },
};
</script>

感谢您的任何帮助