时间戳

首页 > 解决方案 > 如何使 classList.toggle 遵循类的 CSS

javascript - 如何使 classList.toggle 遵循类的 CSS

问题描述

我有一个 CSS 类：

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

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

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

标签： javascriptflip

解决方案

那是因为您已经删除了包含转换编码的类。您需要将默认类设置为在返回时具有所需的转换，或者创建一个新的撤消翻转类，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>

推荐阅读