Trying to do a CSS Transition on a class change

by

Was wondering if there was a way to do a css transition when div is
given a certain class.

Sure you can…

document.querySelector('#header').addEventListener('click', function(e) {
    e.target.classList.toggle('transition');
})
#header {
    background: red;
    padding: 10px 0;
    position: relative;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    left:0;
}

#header.transition {
    background: green;
    left: 50px;
}
<div id="header">Click me to toggle class</div>

DEMO

Leave a Comment