在顺风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>

感谢您的任何帮助

Answer 1

添加到上面的建议中，而不是将transition和附加duration-300到带有变体的每个标签dark:，只需将其全局添加到您的CSS文件中（我假设是index.css），它将像这样影响每个元素

body * {
    @apply transition-colors duration-200;
}

这将针对每个后代body并自动应用您想要的那些顺风类。

我希望这有帮助