Menu
Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way?
$(document).ready(function() { $('#box').click(function() { $(this).find(".hidden").toggleClass('open'); }); });#box { height:auto; background:#000; color:#fff; cursor:pointer; } .hidden { height:200px; display:none; } .hidden.open { display:block; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box"> Initial Content <div class="hidden"> This is hidden content </div> </div>
268
If you even toggle the display property from none to block , your transition on other elements will not occur. To work around this, always allow the element to be display: block , but hide the element by adjusting any of these means: Set the height to 0 . Set the opacity to 0 .
To work around this always allow the element to be display block but hide the element by adjusting any of these means: Set the height to 0. Set the opacity to 0. Position the element outside of the frame of another element that has overflow: hidden.
To add slide down animation from display:none to display:block with JavaScript, we can use the jQuery hide and slideDown methods. to add a p element. to select the p element. Then we call stop to stop the element. Next, we call css to set the display CSS property to block. And then we call hide to hide it.
CSS (or jQuery, for that matter) can't animate between display: none; and display: block;. Worse yet: it can't animate between height: 0 and height: auto. So you need to hard code the height (if you can't hard code the values then you need to use javascript, but this is an entirely different question);
Why the Need to Animate “display”? The need to animate the display property comes from wanting to solve the following problem: You want to make an element gradually disappear visually from the page. You don’t want that element to take up space after it has disappeared (i.e., you want the disappearance to cause reflow).
When animating height (from 0 to auto), using transform: scaleY (0); is another useful approach to hide the element, instead of display: none;: Show activity on this post. How do I have a div not take up space until it is timed to come in (using CSS for the timing.)
Yes, there is a way: http://jsfiddle.net/6C42Q/12/
By using CSS3 transitions, and manipulate height, rather than display property:
.hidden { height: 0px; -webkit-transition: height 0.5s linear; -moz-transition: height 0.5s linear; -ms-transition: height 0.5s linear; -o-transition: height 0.5s linear; transition: height 0.5s linear; } .hidden.open { height: 200px; -webkit-transition: height 0.5s linear; -moz-transition: height 0.5s linear; -ms-transition: height 0.5s linear; -o-transition: height 0.5s linear; transition: height 0.5s linear; } More here: Slide down div on click Pure CSS?
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
