Início / coding / Perguntas / 79591376
Accepted
Ninety9Balloons
Asked: 2025-04-25 04:00:16 +0800 CST

Transição do Tailwind 4.1 para item flexível não está funcionando

  • 772

Estou tendo um problema estranho com o Tailwind e suas transições. Tenho uma div pai com uma cor de fundo que muda dependendo do estado ativo. Ela tem uma transição e funciona perfeitamente.

Dentro dessa div, tenho um "ponto" que alterna entre estar à esquerda e à direita, dependendo do seu estado ativo. A transição aqui não funciona.

Não sei por que a transição da segunda div não está funcionando. Tentei alterar o código para uma div absoluta, alternando entre esquerda-1 e direita-1, mas também não funcionou.

<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 respostas

  1. Best Answer

    Em vez de usar margens, você pode facilmente translatemover o controle deslizante para a largura total 0ou para fora dela.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

relate perguntas