Warum wird meine CSS-Animation nicht ausgelöst, wenn ich eine Klasse mit JavaScript umschalte? [geschlossen] ⇐ CSS

[Anonymous]

Ich versuche, ein Div zu animieren, wenn auf eine Schaltfläche geklickt wird. Die Klasse wird korrekt hinzugefügt, aber die Animation wird nicht ausgeführt. Hier ist mein minimaler Code:

Code: Select all

function toggleBox() {
document.getElementById("box").classList.toggle("animate");
}

Code: Select all

#box {
width: 100px;
height: 100px;
background: red;
transition: transform 1s ease;
}

.animate {
transform: translateX(200px);
}

Code: Select all

Toggle