如何使classList.toggle跟随类的CSS

问题描述

我有一个CSS类：

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

当我单击导致将该类添加到元素的按钮时，卡片翻转，而当我单击导致classList.toggle的背面时，卡片翻转。

它不执行的操作是使用与原始翻转相同的变换样式和过渡效果来进行翻转（向后翻转）。它只是瞬时显示前面。

解决方法

那是因为您删除了包含过渡编码的类。您需要将默认类设置为具有要返回的过渡效果，或者创建一个新的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>