如何使 classList.toggle 遵循类的 CSS

Question

我有一个 CSS 类：

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

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

它没有做的是使用与原始翻转相同的变换样式和过渡效果来取消翻转（翻转）。它只是瞬间呈现正面。

Answer 1

那是因为您删除了包含转换编码的类。您需要设置默认类以在返回时进行所需的转换，或者创建一个新的 undo-flip 类和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>