Html 纯 CSS3 显示/隐藏带过渡的全高 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13847806/
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
Pure CSS3 show/hide full height div with transition
提问by user1898838
Dear Stackoverflow readers,
亲爱的 Stackoverflow 读者，
I've been breaking my head over something I've seen at Tympanus, and I can't figure out how to properly do such a thing.
我一直在为我在 Tympanus 看到的东西而头疼，我不知道如何正确地做这样的事情。
In this link: http://tympanus.net/Tutorials/FullscreenBookBlock/you can see that the menu is completely hidden, and only visible when you click on an icon. It has a lovely transition, and it basically roughly sums up what I'm trying to accomplish.
在这个链接中：http: //tympanus.net/Tutorials/FullscreenBookBlock/你可以看到菜单是完全隐藏的，只有当你点击一个图标时才可见。它有一个可爱的过渡，它基本上概括了我想要完成的工作。
The only difference with the above example is that I don't want to completely hide this full-height element, and I'd like to accomplish the above effect with a hover instead of having to click a button. So in an ideal world you'd see a vertical bar, and when you hover over that bar (or click on it with your finger if you're on a tablet), it "opens up" and shows you the full content inside the opened div.
与上面的例子唯一的区别是我不想完全隐藏这个全高元素，我想通过悬停而不是单击按钮来完成上述效果。因此，在理想的世界中，您会看到一个垂直栏，当您将鼠标悬停在该栏上时（如果您使用的是平板电脑，请用手指单击它），它会“打开”并显示其中的全部内容打开的div
Now, I can make a decent bit in html5 and css3, but the above explained effect that I'm trying to accomplish has given me serious headaches, hehe. Does anyone happen to know a tutorial I might have missed that does this exact thing?
现在，我可以在 html5 和 css3 中取得不错的成绩，但是上面解释的我试图实现的效果让我很头疼，呵呵。有没有人碰巧知道我可能错过的教程可以做这件事？
p.s.: I have tried to take apart Tympanus' html/css, but with the page-fold effect that's also implemented in it I can't seem to figure it out, hence my hope for someone here to help me on my way :)
ps：我曾尝试拆开 Tympanus 的 html/css，但是由于其中也实现了页面折叠效果，我似乎无法弄清楚，因此我希望这里有人能帮助我：)
回答by Shmiddty
#menu{
position:absolute;
width:175px;
padding-right:25px;
top:0;
bottom:0;
margin-left:-175px;
background:#d00;
-webkit-transition:margin-left .5s ease-in-out;
z-index:1;
}
#menu:hover{
margin-left:0;
}
To have the content move, you can simply animate the content div as well: http://jsfiddle.net/LDntf/8/
要移动内容，您也可以简单地为内容 div 设置动画：http: //jsfiddle.net/LDntf/8/
#menu:hover + #content{
left:200px;
right:-175px;
}
#content{
padding:1em;
position:absolute;
top:0;
bottom:0;
right:0;
margin-right:-20px; /* hide the scrollbars */
margin-bottom:-20px;
left:25px;
overflow:scroll; /* always render the scrollbars, without this, the content may occasionally be cut off at the edge. */
-webkit-transition:left .5s ease-in-out, right .5s ease-in-out;
}?
