Как добавить второе свойство CSS (изменение цвета) в анимацию преобразования с использованием classlist.toggle? ⇐ Javascript

[Anonymous]

Я работаю над простым проектом, где я хочу оживить элемент Div. Я пытаюсь сделать белую коробку, которые движутся вправо и изменяют цвет, когда она нажимается. Я использую событие JavaScript Click для переключения класса CSS. У меня есть переход: все свойства на коробке, поэтому я ожидал, что он анимает оба свойства. < /P>
Вот мой код: < /p>



Animation Problem

body {
display: flex;
justify-content: center;
}
#container {
height: 130px;
width: 350px;
background: linear-gradient(to right, red, blue);
display: flex;
align-items: center;
border-radius: 100px;
}
#box {
height: 100px;
width: 100px;
background-color: #edeaea;
margin-left: 15px;
cursor: pointer;
border-radius: 50%;
transition: all 1s ease-in-out;
}
.clicked-box {
transform: translateX(220px);
}







let box = document.querySelector("#box");
box.addEventListener("click", function(){
box.classList.toggle('clicked-box');
});


```

I have tried adding background-color: blue; to the .clicked-box class, but it still doesn't seem to work, and I'm not sure if I'm missing a property or using the transition incorrectly.

How can I get the box to both move and change color smoothly when it's clicked?

`your text`


Подробнее здесь: https://stackoverflow.com/questions/797 ... on-using-c