Мобильный Jquery - Flip Effect

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

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

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

 Nathan Taylor14 мая 2012 г., 15:52
Вы используете jquery mobile? Если нет, используете ли вы загрузку страниц AJAX? Причина того, что эти переходы работают в jQuery Mobile, заключается в том, что все загрузки страниц являются частичными. Если вы загружаете целую страницу, эффект перехода не будет очень плавным, так как он не будет работать до тех пор, пока страница полностью не загрузится.
 Raghavak15 мая 2012 г., 09:57
Спасибо за отве
 Nathan Taylor14 мая 2012 г., 18:29
Каким из этих эффектов вы хотели бы подражать? Каждый будет отличаться.
 Raghavak14 мая 2012 г., 16:31
Спасибо за ваш ответ Натан, я использую Ajax (загрузка внешних html-страниц в тег div с помощью функции load
 Raghavak15 мая 2012 г., 09:57
Я пытаюсь использовать эффект Flip, Натан.

Ответы на вопрос(1)

но просто. Начните с создания абсолютно позиционированного контейнера с двумя относительно позиционированными дочерними элементами, которые будут двумя страницами, между которыми вы переворачиваете. Как только вы загрузите обе страницы, примените классы 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

 Raghavak16 мая 2012 г., 08:38
Спасибо, Натан. Ты гений .....

Ваш ответ на вопрос