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

[Zander]

Hi,

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. http://codepen.io/Brumonti/pen/VKgNGj

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…;)

[Paulie_D]

You can’t animate / transition the display property..so 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.

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

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

[Zander]

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?

[Paulie_D]

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.

[Zander]

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

[Author]

Posts