Я пытаюсь воспроизвести скользящие переходы в мобильном приложении. У меня есть несколько "страниц", которые позиционируются абсолютно на моем основном div.
Если я хочу, чтобы страница была в поле зрения, я просто установил ее вершину на 0. Если я хочу сделать ее неактивной, я установил ее вершину на что-то вроде 9999px.
Это прекрасно работает. Теперь я хочу добавить некоторые анимации, чтобы немного приправить их. Вот как это выглядит. На всех страницах есть класс.page
.page {
position: absolute;
top: 9999px;
left: 0;
right: 0;
}
.active {
top: 0;
left: 0;
bottom: 0;
right:0;
z-index: 50;
}
Когда я хочу перейти на страницу, я добавлю к нему класс и удалю любые другие страницы, у которых классы неактивны. Оно работает.
Я также добавил переход.6s к нему, чтобы он стал:
.page {
position: absolute;
top: 9999px;
left: 0;
right: 0;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
Я вижу эффект. Однако есть два эффекта.
Как удалить первый эффект?
Как вы можете видеть в этой скрипке: http://jsfiddle.net/UnNbv/ (код воспроизводится ниже), если вы установите продолжительность перехода только на активные страницы, вы получите желаемый эффект.
Пример из скрипки (анимация при наведении, прыжки на мыши):
.test {
position: relative;
width:100px;
height:100px;
background:#FF0000;
}
.test:hover {
top:10px;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
Для того, чтобы применить его к вашей ситуации, просто применить переход к .active
класса вместо .page
класса.
И чтобы получить обратный эффект (анимировать, но не в), вы могли бы использовать .page:not(.active)
(:not
псевдокласс не поддерживается всем, что поддерживает переходы)
Редактировать:
Если вы хотите, чтобы новая страница скользнула по верхней части старой страницы, step-end
- ваш друг (я часто задавался вопросом, какое использование он может использовать, теперь я знаю!). В частности, код выглядит следующим образом:
.page {
position:absolute;
-webkit-transition: top .6s ease-in-out;
-moz-transition: top .6s ease-in-out;
-o-transition: top .6s ease-in-out;
-ms-transition: top .6s ease-in-out;
transition: top .6s ease-in-out;
}
.page.active {
top:0;
z-index:1;
}
.page:not(.active) {
top:100%;
-webkit-transition-timing-function: step-end;
-moz-transition-timing-function: step-end;
-o-transition-timing-function: step-end;
-ms-transition-timing-function: step-end;
transition-timing-function: step-end;
}
(пример скрипта: http://jsfiddle.net/NN9b5/)
Сдвиг вниз и продвижение вверх происходит, потому что переход последовательно применяется к обоим состояниям.
Его немного сложно сделать переход применим только к одному состоянию или классу CSS из-за характера удаления класса, если он содержит как эффект перехода, так и свойство, которое приводит к тому, что изменение легко запускается в проблему.
Это немного проще в случае примера наведения из @Dave, поскольку наведение не является начальным состоянием элемента, оно может содержать переходы.
Вот некоторый код, который разбивает все это, давая вам немного больше контроля, но, по общему признанию, может быть длинным...
function switchPages() {
var pageToMakeInactive = $(".page.active"),
pageToMakeActive = $(".page.inactive"),
transitionEndEvent =
"transitionend " +
"webkitTransitionEnd " +
"oTransitionEnd " +
"otransitionend ";
pageToMakeActive
.addClass("active")
.removeClass("inactive")
.one(transitionEndEvent, function(){
// we only want to remove the transtionable
// behaviour once the transition has ended
$(this).removeClass("transitionable");
});
pageToMakeInactive
.addClass("inactive")
.removeClass("active");
// must add the transition effects on a different
// call otherwise they will be applied alongside
// the position changes and this page will slide down
setTimeout(function() {
pageToMakeInactive.addClass("transitionable");
}, 0)
}
:hover
в значительной степени является заменой класса .active
используемого OP. Вы можете поменять одно на другое и сохранить ту же логику. Я просто использовал hover, потому что с демо проще использовать чистый CSS.
.animate
.