Alex Rivera | Logout

css3 slideup slide down

Asked 2011-09-14T15:02:33.690
13

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!

css css-transitions
Edit
Report

1 Answer

2

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.

answered 2011-09-14T15:10:16.463

Your Answer