Moving height doesn't work
* { padding:0; margin:0; }
li { list-style: none: list-type: none; }
li div { max-height:0; overflow:hidden; background: #000; color: #fff;
transition: all 0.2s ease-in-out;
}
li span { display: block; padding: 4px; font-weight: bold; color: #fff; background: #000;}
li span:hover + div {
max-height: 400px;
}
<ul>
<li>
<span>Something</span>
<div>
Some content <br>
Some content <br>
Some content <br>
Some content <br>
Some content <br>
</div>
</ul>
Transitions require a specific start and a specific end state. You don't have a definite end height (unspecified auto
), so you cannot go from height:0
toheight:auto
Your JSFiddle also doesn't contain the height swap code.
A workaround for you is to use max-height
and go from 0
to some moderately large value.
source to share
Use the CSS Transition Property transition-delay;
This solves your problem: http://jsfiddle.net/cdxbk443/
Or no animation: http://jsfiddle.net/vd9qz3xs/
To increase the duration of the delay, simply add a few more seconds to the property transition-delay
ul#subnavlist
.
ul#navlist {
font-family: sans-serif;
}
ul#navlist a {
text-decoration: none;
color: white;
}
ul#navlist, ul#subnavlist, li#subactive, ul#navlist ul, ul#navlist li, #active {
list-style-type: none;
width: 250px !important;
overflow:hidden;
margin:0;
padding:0;
}
ul#navlist li {
float: left;
}
ul#navlist li a:hover {
color: #F7A11A;
}
#left-arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: relative;
float: right;
left: 100px;
border-top: 10px solid #404040;
}
#d1 span {
float: left;
position: relative;
left: -15px;
}
ul#subnavlist {
visibility: hidden;
opacity: 1;
height: 0px;
width:250px !important;
z-index: 9;
font-size: 8pt;
padding-top: 5px;
top:0;
left:0;
width:250px !important;
}
ul#subnavlist li {
float: none;
width:250px !important;
padding: 0px;
margin: 0px;
}
ul#subnavlist li a {
color: white;
padding: 0px;
margin: 0px;
}
ul#navlist li:hover ul#subnavlist {
visibility: visible;
transition-delay: 0.4s;
background: #404040;
font-size: 8pt;
padding-top: 5px;
top:0;
left:0;
height: auto;
width:250px !important;
border-top: 6px solid #F7A11A;
}
ul#navlist li:hover ul#subnavlist li a {
display: block;
width: 250px;
border: none;
padding: 7px 10px;
}
#container1 {
height: 20px;
padding: 5px;
background: #404040;
}
#navlist:hover #left-arrow {
border-top: 10px solid white;
position: relative;
transform: translateX(118px) rotate(180deg);
border-top: 10px solid #F7A11A;
}
#navlist:hover #couldBeAnImage {
border-top: 10px solid #F7A11A;
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
position: relative;
top: 4px;
}
#navlist:hover #d1 span {
color: #F7A11A;
}
#left-arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
float: left;
border-top: 10px solid white;
top: 4px;
-webkit-transition: -webkit-transform .42s ease-in-out;
-ms-transition: -ms-transform .42s ease-in-out;
transition: transform .42s ease-in-out;
}
source to share
You want to add a property transition-delay
. https://css-tricks.com/almanac/properties/t/transition-delay/
These, as you wrote your short transition property, only include transition duration.
transition: [transition property] [transition duration] [transition time function] [transition delay];
So, just add the delay duration to the end of your lines:
-webkit-transition: height 200ms ease-in 200ms;
-moz-transition: height 200ms ease-in 200ms;
-o-transition: height 200ms ease-in 200ms;
transition: height 200ms ease-in 200ms;
source to share