Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Smooth CSS animate via addClass/removeClass

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #193802
    jack_Quarry
    Participant

    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

    #193803
    Paulie_D
    Moderator

    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

    #193839
    jack_Quarry
    Participant

    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?

    #193866
    Paulie_D
    Moderator

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.