播放CSS动画添加javascript类后，当其他类被删除时，不播放CSS动画

我尝试在选定元素时播放动画，在取消选择元素时播放反向动画。我的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）

  ，没有任何效果。我也一样
• 使用

  setTimeout（…，10）

  是可行的，但在动画开始之前，动画后期风格的丑陋形式非常明显
• 将动画放入

  .card

  ，而不是

  .inactive

  。这似乎只是在页面加载时禁用所有动画
• 使用

  getComputedStyle

  在删除和添加类之间强制DOM重画。没有效果

---

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

为什么不使用

转换

？使用

动画

，很难控制流量。您需要使用第二个动画（一个用于活动，一个用于非活动）或触发JavaScript中的回流（请参阅）。下面是一个带有

转换的示例：


const$cards=Array.from（document.getElementsByClassName（“card”））
函数handleClick（evt）{
$cards.forEach（$card=>$card.classList.remove（“active”））
evt.target.classList.add（“活动”）
}
$cards.forEach（$card=>$card.addEventListener（“单击”，handleClick））
.card{
显示：内联块；
利润率：10px；
宽度：100px；
高度：100px；
边框：1px纯色灰色；
光标：指针；
转换：转换1s轻松输入输出；
变换：比例（0.75）；
}
.card.active{
变换：比例（1）；
}
卡1
卡2
卡片3
卡4
为什么不改用
转换
？使用
动画
，很难控制流量。您需要使用第二个动画（一个用于活动，一个用于非活动）或触发JavaScript中的回流（请参阅）。下面是一个带有
转换的示例：


const$cards=Array.from（document.getElementsByClassName（“card”））
函数handleClick（evt）{
$cards.forEach（$card=>$card.classList.remove（“active”））
evt.target.classList.add（“活动”）
}
$cards.forEach（$card=>$card.addEventListener（“单击”，handleClick））
.card{
显示：内联块；
利润率：10px；
宽度：100px；
高度：100px；
边框：1px纯色灰色；
光标：指针；
转换：转换1s轻松输入输出；
变换：比例（0.75）；
}
.card.active{
变换：比例（1）；
}
卡1
卡2
卡片3
卡4
假设活动卡应该从.75开始，然后变大

.card.active {
    transform: scale(0.75); /* moved this to here */
    animation: 1s ease-in-out reverse scale-effect;
}

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

假设活动卡应该从.75开始，然后变大

.card.active {
    transform: scale(0.75); /* moved this to here */
    animation: 1s ease-in-out reverse scale-effect;
}

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

我以前遇到过这种情况，在通过javascript添加另一个动画之前，需要为目标元素重置动画

 var el = document.getElementById('target_element_id');
 el.style.animation = 'none'; // clear animation
 el.offsetHeight; /* trigger reflow */

然后可以添加另一个动画/类。
如果需要，请尝试css'！重要提示：更改动画时。
我以前遇到过这个问题，在通过javascript添加另一个动画之前，需要重置目标元素的动画

 var el = document.getElementById('target_element_id');
 el.style.animation = 'none'; // clear animation
 el.offsetHeight; /* trigger reflow */

然后可以添加另一个动画/类。
如果需要，请尝试css'！重要提示：更改动画时。
谢谢，似乎使用过渡确实更适合我的问题谢谢，似乎使用过渡确实更适合我的问题