I have html as
<div id ="div-1>
<div id ="div-2>
when i set display:none for div-1 is hides immediately , and div-2 comes on top abrubtly.
Is there any way that div-2 slides out to top, instead of coming directly.
I have tried transition with max-height set to zero for div 1 but , it’s not working.
I am working on a js lib to swipe out html elements.
I just want a animated scroll for bottom elements , when div on top is set to display:none.
I only have reference for first div.
Let me DuckDuckGo that for you.
It seems to require a bit of a hack and there are several possibilities.
Have you considered using React? I need something similar for a project I’m about to start (swiping out divs) and I’m planning to try using a transition library, probably this one -
Try this… no need for React, just plain CSS and jQuery
You could also try doing this using the CSS visibility: hidden prop instead of display: none – I believe visibility works with transitions
But it will leave and still occupy a big empty space in that area… as if the div is still there, just invisible.
True indeed – forgot about that part. Apparently, however, it’s possible to do this with visibility: collapse on a flex item… https://drafts.csswg.org/css-flexbox-1/#visibility-collapse
…I’ll have to try that one out
But i cant’t use jquery.
Do you have any idea, how slideup wotks internally??
It sets and animates the following
height: <reduces from original height to 0px>
margin-top: <reduces from original value to 0px>
margin-bottom: <reduces from original value to 0px>
and at the end of the animation, it sets the element to
Thanks , it worked perfectly .