- This topic is empty.
October 24, 2016 at 8:01 am #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. 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…;)October 24, 2016 at 8:04 am #246980Paulie_DMember
You can’t animate / transition the
displayproperty..so this method won’t work.
Fortunately, you are using
max-heightwhich can be transitioned.
So we start with
overflow:hiddenand apply a
.openclass. I also moved the transtion so it applies both ways.
Note that you also can’t transition to
height:autobut there are JQ plugins that overcome this.October 24, 2016 at 11:12 am #246989
facepalm The moment you said it, I remembered that you can’t animate
displayproperty. 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
max-height?October 24, 2016 at 11:25 am #246990Paulie_DMember
You can animate
heightas long as both the start and end values are fixed.
What you can’t do is animate to or from
height: autoat least without JS.October 24, 2016 at 11:30 am #246991
Ah, I see. Thanks again, your help is just great!
- The forum ‘CSS’ is closed to new topics and replies.