<!--CSS Transitions Animated Height from 0 (hidden) to auto (reveal)-->
<!--according menu sets the max height to target (onclick) vs on hover.....ul.VmainMenu li:target ul with max-height set at 100% for fluid auto adjusting submenus-->
This is some content that could be any length. In fact, click on it to edit it in place.
Hover over the grey box.
So, how did that work? We aren't animating height, we are animating max-height. By setting that to a large value, and setting our overflow to be hidden, we can do what we need.<!DOCTYPE html>
<html>
<head>
<style>
.outside_box {
width:200px;
height:200px;
background-color: grey;
margin:0 auto 1em;
}
.our_content {
color:white;
background-color:#444;
border-bottom:1px white solid;
max-height:0;
overflow:hidden;
-webkit-transition:max-height 0.8s;
-moz-transition:max-height 0.8s;
transition:max-height 0.8s;
}
.our_content p {
padding:10px;
}
.outside_box:hover .our_content {
max-height:200px;
}
</style>
<div class='outside_box'>
<div class="our_content">
<p contenteditable>This is some content that could be any length. In fact, click on it to edit it in place.</p>
</div>
</div>
<p class='center'><b>Hover over the grey box.</b></p>
<p>So, how did that work? We aren't animating height, we are animating max-height. By setting that to a large value, and setting our overflow to be hidden, we can do what we need.</p>
<h2>Simplified CSS</h2>
<pre class="prettyprint lang-css">
.our_content {
/* Initially we don't want any height, and we want the contents to be hidden */
max-height: 0;
overflow: hidden;
/* Set our transitions up. */
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.outside_box:hover .our_content {
/* On hover, set the max-height to something large. In this case there's an obvious limit. */
max-height: 200px;
}
</body>
</html>
No comments:
Post a Comment