javascript CSS3 过渡向下/向上滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24610547/
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/Up
提问by yansusanto
.header {
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
z-index:2
}
.menu ul {
position:absolute;
top:0;
left:0;
width:100%;
-webkit-transform:translateY(-100%);
-moz-transform:translateY(-100%);
transform:translateY(-50%);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.menu ul.is-visible {
-webkit-transform:translateY(50px);
-moz-transform:translateY(50px);
transform:translateY(50px)
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
The above is the CSS I use to toggle a menu open/close using a transition element for a sliding down/up effect.
以上是我用来切换菜单打开/关闭的 CSS，使用过渡元素来实现向下/向上滑动效果。
Currently the menu slides from the top of the header; is it possible for it to slide from the bottom of the header which is 50px from the top?
当前菜单从标题顶部滑动；它是否可以从距顶部 50 像素的标题底部滑动？
I'm still trying to learn how to use transition, so any advice is much appreciated.
我仍在努力学习如何使用过渡，因此非常感谢任何建议。
Thanks!
谢谢！
回答by jme11
Is this what you want?
这是你想要的吗？
DEMO
演示
You didn't provide your markup, so I had to guess. Basically, if you wrap the li text in a span and give it a background color to match the color of the header (navigation bar), you can obscure the menu as it drops into place.
你没有提供你的标记，所以我不得不猜测。基本上，如果您将 li 文本包裹在一个跨度中并为其指定背景颜色以匹配标题（导航栏）的颜色，您可以在菜单放置到位时隐藏它。
Also, I didn't bother with the floating and absolute positioning. Again, I don't have the benefit of seeing your actual markup, but it was unneeded to accomplish this particular layout.
此外，我没有打扰浮动和绝对定位。同样，我没有看到您的实际标记的好处，但不需要完成此特定布局。
HTML:
HTML：
<header>
<ul class="menu">
<li><span>Menu Item 1</span>
<ul>
<li><a href="#">Submenu Item 1</a></li>
<li><a href="#">Submenu Item 2</a></li>
<li><a href="#">Submenu Item 3</a></li>
<li><a href="#">Submenu Item 4</a></li>
<li><a href="#">Submenu Item 5</a></li>
</ul>
</li>
<li><span>Menu Item 2</span>
<ul>
<li><a href="#">Submenu Item 1</a></li>
<li><a href="#">Submenu Item 2</a></li>
</ul>
</li>
<li><a href="">Menu Item 3</a></li>
<li><span>Menu Item 4</span>
<ul>
<li><a href="#">Submenu Item 1</a></li>
</ul>
</li>
</ul>
</header>
CSS:
CSS：
header {
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
background-color: yellowgreen;
font-family: sans-serif;
}
a {
color: yellowgreen;
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu > li {
float: left;
line-height: 50px;
text-align: center;
color: white;
width: 150px;
}
li span {
height: 50px;
width: 100%;
display: block;
background-color: yellowgreen;
position: relative;
z-index: 100;
cursor:pointer;
}
ul.menu > li > a {
color: white;
}
li > ul {
background-color: white;
color: yellowgreen;
text-align: left;
-webkit-transform:translateY(-200%);
-moz-transform:translateY(-200%);
transform:translateY(-100%);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
li > ul > li {
border: 1px solid yellowgreen;
border-top: none;
padding: 0 10px;
}
li:hover ul {
opacity: 1;
-webkit-transform:translateY(0px);
-moz-transform:translateY(0px);
transform:translateY(0px) -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
回答by Enethion
First of all: .menu ul.is-visiblealready has "transition" property inherited from .menu ul, so you don't have to set it once again.
Secondly, try setting topproperty of .menu ul.is-visibleto 50px, but with no transition on it (so you can't use transition: all t, but e.g. transition: transform t)
首先：.menu ul.is-visible已经具有从 继承的“过渡”属性.menu ul，因此您不必再次设置它。其次，尝试将top属性设置.menu ul.is-visible为 50px，但没有过渡（因此您不能使用transition: all t，但是例如transition: transform t）
EDIT: If you could put your code on jsFiddle, I would be very pleased.
编辑：如果你能把你的代码放在 jsFiddle 上，我会很高兴。
UPDATE:
更新：
I've managed to fix this by putting copy of .menu ulinto new div.menuelement that's placed before .headerand both are placed in new header.nav-header. It works, but I believe it could be done easier.
我设法通过将副本放入之前放置的.menu ul新div.menu元素.header并将两者都放置在新元素中来解决此问题header.nav-header。它有效，但我相信它可以更容易地完成。
回答by SrAxi
Can't comment yet, but did you try putting 100px instead of 50px in here:
还不能发表评论，但是您是否尝试将 100px 而不是 50px 放在此处：
-webkit-transform:translateY(50px);
-moz-transform:translateY(50px);
transform:translateY(50px)
Let me know how it goes, I will investigate to remember how to do it! Long time since I don't use that!
让我知道它是怎么回事，我会调查记住怎么做！好久没用了！
UPDATE:
更新：
Try this:
试试这个：
.menu ul {
position:absolute;
top:50px;
left:0;
width:100%;
-webkit-transform:translateY(-100%);
-moz-transform:translateY(-100%);
transform:translateY(-50%);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
Setting top to 50px, should move the menu 50px from the top, so it would start scrolling down from the bottom of the header.
将顶部设置为 50 像素，应该将菜单从顶部移动 50 像素，这样它就会从标题底部开始向下滚动。
If not, try it with jQuery.
Set the menu where you want it to be when it fully scrolls down, and then hide it with hide().
Then in a easy click()function u set the efect that you want it to have (fadeIn, scroll, whatever) and you show it with a show().
如果没有，请尝试使用 jQuery。将菜单设置为完全向下滚动时您想要的位置，然后使用 将其隐藏hide()。然后在一个简单的click()函数中，你设置你想要的效果（淡入、滚动等等），然后用show().
If you need more detailed jQuery code tell me and I write it for you. Good Luck! ;)
如果您需要更详细的 jQuery 代码，请告诉我，我会为您编写。祝你好运！;)
UPDATE2:
更新2：
I did a Fiddle example with jQuery (very basic):
我用 jQuery 做了一个 Fiddle 示例（非常基本）：
The speed of the jQuery effect is set to 800, you can modify it. Same with the effect itself. Also the button I took was for quick demonstration, you can take whatever you want, as long as you point it through name, ID or class in the jQuery.
jQuery 效果的速度设置为 800，您可以修改它。与效果本身相同。另外我拿的按钮是为了快速演示，你可以拿任何你想要的，只要你通过 jQuery 中的名称、ID 或类指向它。
