如何使 classList.toggle 遵循类的 CSS

Question

I have a CSS class:

.do-flip {
  transform: rotateX(180deg);
  transform-style: preserve-3d;
  transition: transform 0.8s, -webkit-transform 0.8s;
}

When I click the button that results in this class being added to the element, the card flips, and when I click the button the back side that results in the classList.toggle, it unflips.

What it does not do is unflip (flip back) using the same transform-style and transition effect as the original flip. It simply presents the front instantaneously.

Answer 1

That's because you have removed the class containing the transition coding. You'll need to either set the default class to have the transition you want on returning or create a new undo-flip class and classList.replace('do-flip', 'undo-flip') and vice versa.

 const card = document.querySelector('.card').addEventListener('click', (e) => { e.target.classList.toggle('do-flip'); });

 .card { transform-style: preserve-3d; transition: transform 0.8s, -webkit-transform 0.8s; } .do-flip { transform: rotateX(180deg); }

 <div class="card">card-flip</div>