主页 / coding / 问题 / 79591376
Accepted
Ninety9Balloons
Asked: 2025-04-25 04:00:16 +0800 CST

Tailwind 4.1 弹性项目转换不起作用

  • 772

我在使用 Tailwind 及其过渡效果时遇到了一个奇怪的问题。我有一个父 div，其背景颜色会根据 activeState 的变化而变化。这个 div 有一个过渡效果，效果很好。

在这个 div 中，我有一个“点”，它会根据它的 activeState 在左侧和右侧之间切换。这个过渡效果不起作用。

我不确定为什么第二个 div 的过渡不起作用。我试过把代码改成绝对 div，用 left-1 和 right-1 来切换，但还是不行。

<div
  className={`flex items-center ${
    activeState ? "bg-red-400 " : "bg-gray-600 "
  } w-11 h-6 rounded-full transition-all px-[2px]`}
>
  <div
    className={`bg-white w-5 h-5 rounded-full ${
      activeState ? "ml-auto" : "mr-auto"
    } transition-all`}
  ></div>
</div>
javascript

1 个回答

  1. Best Answer

    translate您可以轻松地使用将滑块移动到全宽0或100%全宽，而无需使用边距。

    const toggle = document.getElementById('toggle');
const dot = document.getElementById('dot');
let isActive = false;

toggle.addEventListener('click', () => {
  isActive = !isActive;

  toggle.classList.toggle('bg-red-400', isActive);
  toggle.classList.toggle('bg-gray-600', !isActive);

  if (isActive) {
    dot.style.transform = 'translateX(100%)';
  } else {
    dot.style.transform = 'translateX(0)';
  }
});
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div id="toggle" class="relative w-11 h-6 rounded-full bg-gray-600 transition-colors cursor-pointer">
  <div id="dot" class="absolute top-[2px] left-[2px] w-5 h-5 bg-white rounded-full transition-transform duration-300">
  </div>
</div>

    • 1

相关问题