Animate using css when changing class

advertisements

I am attempting to animate a property of the css for a form button using javascript by changing the class name. The property change is applied but is not animated and I cannot see why. Below is my code:

css:

button {
    padding-right: 0px;
    transition: padding-right 2.5s;

}

button.inactive {
    padding-right: 0px;

}

button.active {
    padding-right: 100px;
}

javascript(for transitioning to active):

this.form.getElementsByTagName("button")[0].className ="active";

(for transitioning to inactive):

this.form.getElementsByTagName("button")[0].className ="inactive";


I mocked up an example using your code that you provided and the animated transition is happening without a problem - can been seen here https://jsbin.com/qewolu/edit?html,css,js,output