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

Home Forums CSS css animation won’t „ease“ with jquery’s addClass

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #246979


    What I am trying to achieve is quite like a toggle menue that slides open. I avoid „slideToggle“ to not get the „display:none“ vs. „display:block“ problem, because I use Flexbox.

    Please see the Pen I made for showing my problem.

    I am using flexbox on a container with a bunch of elements that is stacked on top of a header. This container has „display:none“ to it. I named it „table-of-content“.

    I also added a classname selector of „open“, where I set the „display:flex“ property plus a „transition:ease“-property plus all the styling.

    That way I can open/close the thing when I click on a hamburger icon. This works fine and also the „flex-wrap:wrap“-thing does work.

    But I can’t get the css animation of „ease“ to work.

    Putting the cass-transition properties into the class-selector of „open“ doesn’t work. I also made a seperate class of „slide“ with the transition properties in my css and tried to „addClass“ in addition to the „toggleClass(‚open‘), but no – doesn’t work.

    Can someone please nudge me in the right direction?

    Should I mention, that I am relatively new to this stuff? You probably guessed it already…;)


    You can’t animate / transition the display this method won’t work.

    Fortunately, you are using max-height which can be transitioned.

    So we start with max-height:0 and overflow:hidden and apply a max-height:300px to your .open class. I also moved the transtion so it applies both ways.

    Note that you also can’t transition to height:auto but there are JQ plugins that overcome this.


    facepalm The moment you said it, I remembered that you can’t animate display property. There is a video on this, here on css-tricks.

    I then wanted to try to animate the height of the thing and wondered how I would do it, until your complete answer showed up.

    Thank you so much!

    Just a short follow-up question: Is it that one can’t animate height, only max-height?


    You can animate height as long as both the start and end values are fixed.

    What you can’t do is animate to or from height: auto at least without JS.


    Ah, I see. Thanks again, your help is just great!

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