Скользить вверх переходы

0

Я пытаюсь воспроизвести скользящие переходы в мобильном приложении. У меня есть несколько "страниц", которые позиционируются абсолютно на моем основном 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;
}

Я вижу эффект. Однако есть два эффекта.

  1. Когда мне не нужна страница, я удаляю активный класс из нее. Я также вижу, что эта страница идет вниз, чего я не хочу.
  2. Затем другая страница скользит вверх, и это нормально.

Как удалить первый эффект?

Теги:

2 ответа

0
Лучший ответ

Как вы можете видеть в этой скрипке: 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/)

Поделиться
  • 0
    Отлично. Я использовал step-end. Единственная проблема заключается в том, что теперь, когда новая страница скользит поверх старой страницы, у меня есть кнопка закрытия на новой странице. Если я нажимаю на нее, у меня тот же эффект, очевидно, старая страница идет снизу. Но что, если я хочу смоделировать эффект закрытия и сдвинуть новую страницу вниз, т.е. обратный эффект ..
  • 0
    Это немного для CSS, и, честно говоря, это другой вопрос; вам нужно использовать JavaScript, чтобы динамически решить, использовать ли анимацию или нет. Так как вы все равно используете jQuery, я предлагаю посмотреть на .animate .
Показать ещё 1 комментарий
0

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

Его немного сложно сделать переход применим только к одному состоянию или классу CSS из-за характера удаления класса, если он содержит как эффект перехода, так и свойство, которое приводит к тому, что изменение легко запускается в проблему.

Это немного проще в случае примера наведения из @Dave, поскольку наведение не является начальным состоянием элемента, оно может содержать переходы.

Вот некоторый код, который разбивает все это, давая вам немного больше контроля, но, по общему признанию, может быть длинным...

http://jsfiddle.net/WjRAD/

    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)
}
Поделиться
  • 0
    Я не вижу, как это улучшится на втором примере, который я привел: jsfiddle.net/NN9b5 (нажмите для перехода). Кроме того :hover в значительной степени является заменой класса .active используемого OP. Вы можете поменять одно на другое и сохранить ту же логику. Я просто использовал hover, потому что с демо проще использовать чистый CSS.
  • 0
    Это действительно аккуратно (шаг-конец), я попробовал использовать: нет и упростить с помощью переключателя, но не смог сделать это правильно, поэтому я выбрал альтернативный маршрут, но это был недостающий элемент.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню