Вопрос по jquery, html5 – Мобильный Jquery - Flip Effect

5

Пожалуйста, найдите URL ниже.

http: //jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.htm

Как я могу использовать эти эффекты при загрузке страницы или на document.onReady ??

Я пытаюсь использовать эффект Flip, Натан. Raghavak
Спасибо за отве Raghavak
Каким из этих эффектов вы хотели бы подражать? Каждый будет отличаться. Nathan Taylor
Вы используете jquery mobile? Если нет, используете ли вы загрузку страниц AJAX? Причина того, что эти переходы работают в jQuery Mobile, заключается в том, что все загрузки страниц являются частичными. Если вы загружаете целую страницу, эффект перехода не будет очень плавным, так как он не будет работать до тех пор, пока страница полностью не загрузится. Nathan Taylor
Спасибо за ваш ответ Натан, я использую Ajax (загрузка внешних html-страниц в тег div с помощью функции load Raghavak

Ваш Ответ

1   ответ
10

но просто. Начните с создания абсолютно позиционированного контейнера с двумя относительно позиционированными дочерними элементами, которые будут двумя страницами, между которыми вы переворачиваете. Как только вы загрузите обе страницы, примените классы flip и out к заменяемой странице и вызовитеhide() в теме. Наконец, добавьте классы flip и in на отображаемую страницу и вызовитеshow() в теме

Переходы - это просто преобразования CSS3, поэтому просто помните, что они не будут работать во всех браузерах, и они могут плохо работать на больших экранах / машинах с низкой производительностью.

HTML

<button type="button" id="go">FLIP</button>
<div class="container">
    <div class="page1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="page2">
        Duis interdum, odio vel condimentum varius, nibh nunc ultrices velit.
    </div>
</div>

CSS

.container {
    position: absolute;   
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
}
.page1 {
    width: 300px;
    height: 300px;
    background: red;
    position: relative;
}
.page2 {
    width: 300px;
    height: 300px;
    background: blue;
    position: relative;
    display: none;
}

.flip {
    -webkit-backface-visibility:hidden;
    -webkit-transform:translateX(0); 
    -moz-backface-visibility:hidden;
    -moz-transform:translateX(0);
}
.flip.out {
    -webkit-transform: rotateY(-90deg) scale(.9);
    -webkit-animation-name: flipouttoleft;
    -webkit-animation-duration: 175ms;
    -moz-transform: rotateY(-90deg) scale(.9);
    -moz-animation-name: flipouttoleft;
    -moz-animation-duration: 175ms;
}
.flip.in {
    -webkit-animation-name: flipintoright;
    -webkit-animation-duration: 225ms;
    -moz-animation-name: flipintoright;
    -moz-animation-duration: 225ms;
}
.flip.out.reverse {
    -webkit-transform: rotateY(90deg) scale(.9);
    -webkit-animation-name: flipouttoright;
    -moz-transform: rotateY(90deg) scale(.9);
    -moz-animation-name: flipouttoright;
}
.flip.in.reverse {
    -webkit-animation-name: flipintoleft;
    -moz-animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@-moz-keyframes flipouttoleft {
    from { -moz-transform: rotateY(0); }
    to { -moz-transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) ; }
    to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@-moz-keyframes flipouttoright {
    from { -moz-transform: rotateY(0); }
    to { -moz-transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
    from { -webkit-transform: rotateY(-90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoleft {
    from { -moz-transform: rotateY(-90deg) scale(.9); }
    to { -moz-transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoright {
    from { -moz-transform: rotateY(90deg) scale(.9); }
    to { -moz-transform: rotateY(0); }
}

JavaScript

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

$('#go').click(function() {
    var page1 = $('.page1');
    var page2 = $('.page2');
    var toHide = page1.is(':visible') ? page1 : page2 ;
    var toShow = page2.is(':visible') ? page1 : page2 ;

    toHide.removeClass('flip in').addClass('flip out').hide();
    toShow.removeClass('flip out').addClass('flip in').show();
});

Вот рабочая демоверсия:http: //jsfiddle.net/lakario/VPjX9

Спасибо, Натан. Ты гений ..... Raghavak

Похожие вопросы