When display:none is set for div , animate botton divs

I have html as

<div id ="div-1>
  //some content
</div>
<div id ="div-2>
  //some content
</div>

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.

PS

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 -
https://github.com/reactjs/react-transition-group

1 Like

Try this… no need for React, just plain CSS and jQuery

$('#first').click(function() {
  $('#first').slideUp(500);
})

https://codepen.io/owel/pen/QgwjQX

1 Like

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.

1 Like

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

1 Like

But i cant’t use jquery.

Do you have any idea, how slideup wotks internally??

take a look at this, it may help: https://weblog.west-wind.com/posts/2014/Feb/22/Using-CSS-Transitions-to-SlideUp-and-SlideDown#HeightandWidthAnimationsaremorecomplex

1 Like

It sets and animates the following

overflow: hidden
height: <reduces from original height to 0px> 
padding-top: 0px
padding-bottom: 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

display: none
1 Like

Thanks , it worked perfectly .