Html CSS3 过渡向下滑动元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20643344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Transition Slide Down Element
提问by RomeNYRR
I'm trying to recreate a similar menu effect found on the World War Z movie site, but I can't seem get the CSS transition working correctly. I've gotten the hover element to display the hidden block, but the CSS transition wont work. I'm trying to get a cool effect that would slide from the top or bottom, I don't have a specific preference. Also if I try to go over any of the links, the submenu disappears before I can click on it. Here's the Fiddle.
我正在尝试重新创建在 World War Z 电影网站上找到的类似菜单效果，但我似乎无法让 CSS 过渡正常工作。我已经使用悬停元素来显示隐藏块，但是 CSS 过渡不起作用。我正在尝试从顶部或底部滑动的很酷的效果，我没有特定的偏好。此外，如果我尝试查看任何链接，子菜单会在我单击它之前消失。这是小提琴。
HTML:
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:
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; }
回答by Katana314
A few things:
一些东西：
Your :hoverselector should be on the #topmenu element, not the title. That's why the nav area is disappearing so suddenly - it only takes hovering on the menu text.
您的:hover选择器应该在 #topmenu 元素上，而不是在标题上。这就是导航区域突然消失的原因——它只需要悬停在菜单文本上。
You might have a little misconception of the animate property definition. You need to pick a specific property to animate; usually something like 'height'. In this case, my solution was to set "max-height". There may be some way of setting height to something like 'auto', but if so it's lost on me.
您可能对 animate 属性定义有一点误解。你需要选择一个特定的属性来制作动画；通常类似于“高度”。在这种情况下，我的解决方案是设置“max-height”。可能有某种方法可以将高度设置为“自动”之类的东西，但如果是这样，我就迷失了。
Additionally, the "transition" property is set on the object at all times - not just 'when hovering'. It's a sort of constant state to indicate "WHEN this property changes, do a smooth transition". That way, you can have a series of different states giving different heights.
此外，始终在对象上设置“过渡”属性 - 不仅仅是“悬停时”。这是一种恒定状态，表示“当此属性发生变化时，进行平滑过渡”。这样，你可以有一系列不同的状态给出不同的高度。
#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}
Currently, the one issue with my version that I'm just now realizing is that since max height animates to 200px, the nav menu will be fully expanded before it reaches 200 - making the animation less smooth. Maybe you could adjust that a bit based on your needs.
目前，我刚刚意识到我的版本的一个问题是，由于最大高度动画为 200 像素，导航菜单将在达到 200 之前完全展开 - 使动画不那么流畅。也许你可以根据你的需要稍微调整一下。
