如何让 classList.toggle 关注 class 的 CSS

Question

我有一个 CSS class:

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

当我单击导致此 class 被添加到元素的按钮时，卡片翻转，当我单击导致 classList.toggle 的背面按钮时，它取消翻转.

它不使用与原始翻转相同的变换样式和过渡效果来取消翻转（向后翻转）。简直就是瞬间呈现正面

Answer 1

那是因为您删除了包含转换编码的 class。您需要设置默认 class 以在返回时获得您想要的过渡，或者创建一个新的 undo-flip class 和 classList.replace('do-flip', 'undo-flip')，反之亦然。

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>

How to make classList.toggle follow class's CSS