Слайд-шоу слайдов css3

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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 3

Вам нужно будет использовать несколько специфичных для браузера свойств (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 для перехода.