CSS3转换下滑元素
我试图重新创建一个在World War Z电影网站上找到的类似的菜单效果，但我似乎无法让CSS转换正常工作。 我已经得到悬停元素来显示隐藏的块，但CSS转换不会工作。 我试图得到一个很酷的效果，从顶部或底部滑动，我没有特定的偏好。 此外，如果我尝试浏览任何链接，则在我点击它之前，子菜单会消失。 这是小提琴。
HTML：
<ul id="menutitle">Menu Title</ul>
<ul id="submenu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
CSS：
#topmenu {
background: #000;
width: 150px;
height: 50px;
color: #fff;
}
#submenu {
display: block;
position: absolute;
width: 110px;
display: none;
background: #333;
list-style: none;
line-height: 2em;
}
#menutitle:hover + #submenu {
display: block;
-webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in 2s none;
-o-transition: ease-in 2s none;
transition: ease-in 2s none;
}
#menutitle { color: #ff0000; }
a { color: #FF0; }
一些东西：
您的:hover选择器应位于#topmenu元素上，而不是标题。 这就是导航区域如此突然消失的原因 - 它只是在菜单文本上悬停。
您可能对动画属性定义有一点误解。 你需要选择一个特定的属性来设置动画; 通常是“高度”。 在这种情况下，我的解决方案是设置“最大高度”。 可能有某种方法将高度设置为“自动”，但如果是这样，它就会丢失在我身上。
此外，“过渡”属性始终设置在对象上 - 而不仅仅是“悬停时”。 表明“当这个属性发生变化，平稳过渡”时，这是一种不断变化的状态。 这样，你可以有一系列不同的国家给出不同的高度。
http://jsfiddle.net/8YHbq/4/
#topmenu {background: #000; width: 150px; height: 50px; color: #fff; }
#submenu {display: block;
position: absolute;
width: 110px;
background: #333;
list-style: none;
line-height: 2em;
overflow: hidden;
max-height:0;
transition: max-height 0.7s ease-in;
}
#topmenu:hover #submenu {
max-height: 200px;}
#menutitle {color: #ff0000;}
a {color: #FF0}
目前，我刚刚意识到的与我的版本有关的一个问题是，由于最大高度动画为200px，因此导航菜单在达到200之前会完全展开 - 使动画不够流畅。 也许你可以根据你的需要稍微调整一下。
链接地址: http://www.djcxy.com/p/27421.html