javascript - 在顺风 2.0 中从亮模式切换到暗模式时如何应用过渡效果？

Question

因此，我正在使用 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>

感谢您的任何帮助