css3 slideup slide down

How do I style an element with css transitions so that it would slide up / down / left / right when hidden?

开发者_运维问答.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!

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.

This fiddle uses top to move the element. It animates. http://jsfiddle.net/R8zca/4/

This fiddle uses display:none. It doesn't animate. 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-

You may wanna check the following article which contains content sliding demos:

Using CSS3 Transitions, Transforms and Animation

You'll have to use multiple browser specific property (moz-transition, webkit-transition...)

A good explanation of how to use them is there: 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.