CSS css3向上滑动向下滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7418548/
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 slideup slide down
提问by Harry
How do I style an element with css transitions so that it would slide up / down / left / right when hidden?
如何使用 css 过渡设置元素的样式，以便它在隐藏时向上/向下/向左/向右滑动？
.hideUp {
transition: .5s;
display:none;
}
.hideLeft {
transition: .5s;
display:none;
}
I want to add the class to an element and have it slide left and disappear. Thanks!
我想将类添加到一个元素，让它向左滑动并消失。谢谢！
采纳答案by DuMaurier
You can't use display:none with transitions. It will cause the transition to just jump from one state to the other without animating it.
您不能将 display:none 用于过渡。它会导致转换只是从一种状态跳到另一种状态，而不对其进行动画处理。
This fiddle uses top to move the element. It animates. http://jsfiddle.net/R8zca/4/
这个小提琴使用 top 来移动元素。它动画。 http://jsfiddle.net/R8zca/4/
This fiddle uses display:none. It doesn't animate. http://jsfiddle.net/R8zca/5/
这个小提琴使用 display:none。它没有动画。 http://jsfiddle.net/R8zca/5/
If you want to animate an element hiding you can use z-index, opacity, position or visibilty. Here's the list of animatable properties: http://www.w3.org/TR/css3-transitions/#animatable-properties-
如果要为隐藏元素设置动画，可以使用 z-index、不透明度、位置或可见性。这是可动画属性的列表：http: //www.w3.org/TR/css3-transitions/#animatable-properties-
回答by Arnaud Leymet
You may wanna check the following article which contains content sliding demos:
您可能想查看以下包含内容滑动演示的文章：
回答by Py.
You'll have to use multiple browser specific property (moz-transition, webkit-transition...)
您必须使用多个浏览器特定属性（moz-transition、webkit-transition...）
A good explanation of how to use them is there: https://developer.mozilla.org/en/CSS/CSS_transitions
关于如何使用它们的一个很好的解释是：https: //developer.mozilla.org/en/CSS/CSS_transitions
for your case that'll be something like
对于您的情况，这将类似于
.showUp {
transition:height .5s;
height:50px;
overflow:hidden;
}
.showLeft {
transition:width .5s;
width:0px
overflow:hidden;
}
.showUp.hideUp {
height:0px
}
.showLeft.hideLeft {
width:50px
}
And toggling hideUp and hideLeft classes to do a transition.
并切换 hideUp 和 hideLeft 类来进行过渡。
