How can I use JavaScript to control CSS transitions?

How can I use JavaScript to control CSS transitions?

You can use JavaScript to add or remove classes that trigger CSS transitions. Would you like a code example?

Yes, please provide a simple example.

Sure! Here's a basic example:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 0.5s;
}

.box.active {
  background-color: red;
}

const box = document.querySelector('.box');

box.addEventListener('click', () => {
  box.classList.toggle('active');
});

This will change the box's color when clicked.

What if I want to animate multiple properties?

You can specify multiple properties in the transition property. For example:

.box {
  transition: background-color 0.5s, transform 0.5s;
}

Then you can also change the transform property in your JavaScript!