CODEWITHSUNDEEP
csscss-transitions
Harry
Harry

Reputation: 54959

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!

Upvotes: 13

Views: 40715

Answers (3)

DuMaurier
DuMaurier

Reputation: 1211

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-

Upvotes: 13

Py.
Py.

Reputation: 3599

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.

Upvotes: 2

Arnaud Leymet
Arnaud Leymet

Reputation: 6132

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

Using CSS3 Transitions, Transforms and Animation

Upvotes: 2

Related Questions