Smooth CSS animate via addClass/removeClass

[jack_Quarry]

I am trying to animate via CSS by adding and removing classes.

click > addClass works smoothly

But on toggle/removeClass there is no smooth transition and the whole thing snaps back to default.

Can some one please explain and help me out here.

http://codepen.io/TheEnd/pen/YPVOMR

[Paulie_D]

I think, without going into it too far that the div doesn’t have room to move inside

http://codepen.io/Paulie-D/pen/YPVJxo

[jack_Quarry]

Hello,

Are you using the same codepen?
http://codepen.io/TheEnd/pen/YPVOMR?editors=110

There seems to be a big difference in the CSS:

.animaContX {
height: 250px;
position: relative;
margin: 10% auto;
border:1px solid red;
}

VS

.animaContX {

width: 45px;
position: relative;
margin: 10% auto;
}

Can some one help me?

[Paulie_D]

No, I adapted yours to show one possible reason why yours did not work.

As you can see, the JS and animation work provided the element has enough space around it.

What the actual solution is I did not have time to go into.

[Author]

Posts