javascript - 在删除其他类时添加 javascript 类后播放 CSS 动画不播放

Question

我试图在选择元素时播放动画，在取消选择元素时播放反向动画。我的 CSS 看起来像这样:

@keyframes scale-effect {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0.75);
    }
}

.card.active {
    animation: 1s ease-in-out reverse scale-effect;
}

.card.inactive {
    animation: 1s ease-in-out forwards scale-effect;
    transform: scale(0.75);

}

这会在页面加载时播放正确的动画。但是，如果我尝试在 javascript 中更改选定的类:

newActiveObject.classList.remove('inactive');
oldActiveObject.classList.remove('active');
oldActiveObject.classList.add('inactive');
newActiveObject.classList.add('active');

现在，类已正确添加，我可以看到大小发生变化。但是，没有动画播放。

我尝试过的事情:

• 使用 setTimeout(..., 0)，在删除和添加类之间没有任何效果。 1 也一样。
• 使用 setTimeout(..., 10) 有效，但在动画开始之前非常明显的动画后样式的丑陋外观
• 将动画放在 .card 中，而不是 .inactive。这似乎只是在页面加载时禁用所有动画。
• 使用 getComputedStyle 强制在删除和添加类之间重绘 DOM。没有效果。

有谁知道如何在删除类后正确替换动画？

Answer 1

为什么不使用 transition 呢？使用动画，很难控制流程。您需要使用第二个动画(一个用于事件，一个用于非事件)或在 JavaScript 中触发重排(参见 similar question )。这是一个带有 transition 的例子:

const $cards = Array.from(document.getElementsByClassName("card"))

function handleClick(evt) {
  $cards.forEach($card => $card.classList.remove("active"))
  evt.target.classList.add("active")
}

$cards.forEach($card => $card.addEventListener("click", handleClick))

.card {
  display: inline-block;
  margin: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  cursor: pointer;
  transition: transform 1s ease-in-out;
  transform: scale(0.75);
}

.card.active {
  transform: scale(1);
}

<div class="card">CARD 1</div>
<div class="card">CARD 2</div>
<div class="card">CARD 3</div>
<div class="card">CARD 4</div>

如果您真的需要动画，这里有一个包含 2 个动画的工作示例:

const $cards = Array.from(document.getElementsByClassName("card"))

function handleClick(evt) {
  $cards.forEach($card => {
    $card.classList.remove("active")
    $card.classList.add("inactive")
  })
  
  evt.target.classList.remove("inactive")
  evt.target.classList.add("active")
}

$cards.forEach($card => $card.addEventListener("click", handleClick))

@keyframes scale-effect-out {
  from { transform: scale(1); }
  to { transform: scale(0.75); }
}

@keyframes scale-effect-in {
  from { transform: scale(0.75); }
  to { transform: scale(1); }
}

.card {
  display: inline-block;
  margin: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  cursor: pointer;
}

.card.inactive {
  animation: 1s forwards ease-in-out scale-effect-out;
}

.card.active {
  animation: 1s forwards ease-in-out scale-effect-in;
}

<div class="card inactive">CARD 1</div>
<div class="card inactive">CARD 2</div>
<div class="card inactive">CARD 3</div>
<div class="card inactive">CARD 4</div>