css3 слайд слайд вниз

Question

Как мне стилизовать элемент с помощью CSS-переходов, чтобы он мог скользить вверх / вниз / влево / вправо при скрытии?

.hideUp {
  transition: .5s;
  display:none;
}
.hideLeft {
  transition: .5s;
  display:none;
}

Я хочу добавить класс к элементу и сдвинуть его влевои исчезнуть.Спасибо!

Answer 1

Вы не можете использовать дисплей: нет с переходами. Это приведет к тому, что переход просто перейдет из одного состояния в другое без его анимации.

Эта скрипка использует top для перемещения элемента. Это оживляет. http://jsfiddle.net/R8zca/4/

Эта скрипка использует отображение: нет. Это не оживляет. http://jsfiddle.net/R8zca/5/

Если вы хотите анимировать скрытие элемента, вы можете использовать z-index, opacity, position или visibilty. Вот список анимируемых свойств: http://www.w3.org/TR/css3-transitions/#animatable-properties-

Answer 2

Вам нужно будет использовать несколько специфичных для браузера свойств (moz-transition, webkit-transition ...)

Хорошее объяснение того, как их использовать, есть: https://developer.mozilla.org/en/CSS/CSS_transitions

для вашего случая это будет что-то вроде

.showUp {
  transition:height .5s;
  height:50px;
  overflow:hidden;
}
.showLeft {
   transition:width .5s;
   width:0px
   overflow:hidden;
}
.showUp.hideUp {
  height:0px
}
.showLeft.hideLeft {
   width:50px
}

И переключение классов HideUp и HideLeft для перехода.

Answer 3

Возможно, вы захотите проверить следующую статью, в которой содержатся демонстрационные ролики:

Использование CSS3 переходов, преобразований и анимации