Как мне создать элемент с переходами css, чтобы он скользил вверх/вниз/влево/вправо при скрытии?
.hideUp {
transition: .5s;
display:none;
}
.hideLeft {
transition: .5s;
display:none;
}
Я хочу добавить класс в элемент и оставить его влево и исчезнуть. Спасибо!
Вы не можете использовать отображение: нет с переходами. Это приведет к тому, что переход просто перейдет из одного состояния в другое, не оживив его.
Эта скрипка использует верхнюю часть для перемещения элемента. Он оживляет. 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-
Возможно, вы захотите проверить следующую статью, содержащую демонстрационные материалы:
Вам нужно будет использовать несколько специфичных для браузера свойств (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 для перехода.