Home/ Questions/Q 8686819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T22:57:42+00:00

I’m trying to get a good page transition in my app. Using HTML and

  • 0

I’m trying to get a good page transition in my app. Using HTML and javascript. I tryed the data-transition attribute but it’s very slow.

The solution I come up with is reading html files and pasting them into the index.html and using css3 animation for a page transition.

I also tryed this with ajax:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    $.ajax({
        url: 'test.html',
        success: function(data) {
            console.log('success');
            console.log(data);
        },
        error: function() {
            console.log('error');
        }
    });
}

log:

success
[object Document]

How can I successfully read my html file which is in the www folder?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found the answer:

        $('#page1').load('test.html');

    With this code I load the test.html into a div with id=”page1″ which is inside the body.

    How I do the page transition:

    In this example I navigate from the login.html to the test.html and back. Both html files are loaded into the index.html

    index.html:

        <!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="mycss.css" />
    <script src="phonegap.js"></script>
    <script src="jquery-1.8.2.js"></script>
    <script>
    document.addEventListener("deviceready", onDeviceReady, false);
    var pages = new Array();
    var currentpage;
    var otherpage;

    function onDeviceReady() {
        console.log('deviceReady');
        currentpage = $('#page1');
        otherpage = $('#page2');
        pushPage('login.html');
        document.addEventListener("backbutton", popPage, false);
    }

    function popPage(){
        if(pages.length == 1){
            console.log('exit app end of stack');
            navigator.app.exitApp();
        } else{
            console.log('pop page');
            //swap page vars
            var temp = currentpage;
            currentpage = otherpage;
            otherpage = temp;

            currentpage.load(pages[pages.length - 2]);

            currentpage.removeClass();
            otherpage.removeClass();

            currentpage.addClass("pagePopIn");
            otherpage.addClass("pagePopOut");

            pages.pop();
        }
    }

    function pushPage(url){
        pages.push(url);

        //swap page vars
        var temp = currentpage;
        currentpage = otherpage;
        otherpage = temp;

        currentpage.load(url, function(response, status, xhr){
            currentpage.removeClass();
            otherpage.removeClass();

            currentpage.addClass("pagePushIn");
            otherpage.addClass("pagePushOut");
        });
    }

    </script>
</head>

<body id="body">
    <div id="page1">
    </div>
    <div id="page2">
    </div>

</body>
</html>

    login.html:

    <h1>Log in</h1>
<input type="text" />
<input type="password"/>
<button type="button" onclick="pushPage('register.html');">Register</button>
<button type="button" onclick="pushPage('test.html');">Log in</button>

    test.html:

    <button type="button" onclick="popPage();">Terug</button>
<h1>Test</h1>
This is a test!</br>
This is a test!</br>

    mycss.css:

    body{
    padding: 0px;
    margin: 0px;
    background-color: white;
    width: 100%;
    height: 100%;
}

button{
    background-color: #004A91;
    color: #E2007A;
    padding: 15px;
    font-weight: bold;
    font-family: "camingodos-web", "verdana", sans-serif;
    border-style:none;
    min-height: 45px;
}

button:active{
    background-color: red;
}

h1{
    margin: 10px;
    padding: 8px;
    color: #E2007A;
    font-weight: bold;
    font-family: "camingodos-web", "verdana", sans-serif;
}

.pagePopIn{
    padding: 0px;
    margin: 0px;
    position:absolute;
    width:100%;
    -webkit-animation:pagePopInTransition 0.8s;
    animation:pagePopInTransition 0.8s;
}

.pagePopOut{
    padding: 0px;
    margin: 0px;
    position:absolute;
    visibility: hidden;
    width:100%;
    -webkit-animation:pagePopOutTransition 0.8s;
    animation:pagePopOutTransition 0.8s;
}

@keyframes pagePopInTransition{
    0%   {left:-100%; width:100%; visibility: visible;}
    100% {left:0px; width:100%;}
}

@-webkit-keyframes pagePopInTransition /* Safari and Chrome */
{
    0%   {left:-100%; width:100%; visibility: visible;}
    100% {left:0px; width:100%;}
}

@keyframes pagePopOutTransition{
    0%   {left:0px; width:100%; visibility: visible; opacity: 1;}
    100% {left:100%; width:100%; visibility: hidden; opacity: 0.5;}
}

@-webkit-keyframes pagePopOutTransition /* Safari and Chrome */
{
    0%   {left:0px; width:100%; visibility: visible; opacity: 1;}
    100% {left:100%; width:100%; visibility: hidden; opacity: 0.5;}
}

.pagePushIn{
    padding: 0px;
    margin: 0px;
    position:absolute;
    width:100%;
    -webkit-animation:pagePushInTransition 0.6s;
    animation:pagePushInTransition 0.6s;
}

.pagePushOut{
    padding: 0px;
    margin: 0px;
    position:absolute;
    visibility: hidden;
    width:100%;
    -webkit-animation:pagePushOutTransition 0.6s;
    animation:pagePushOutTransition 0.6s;
}

@keyframes pagePushInTransition{
    0%   {left:100%; width:100%; visibility: visible;}
    100% {left:0px; width:100%;}
}

@-webkit-keyframes pagePushInTransition /* Safari and Chrome */
{
    0%   {left:100%; width:100%; visibility: visible;}
    100% {left:0px; width:100%;}
}

@keyframes pagePushOutTransition{
    0%   {left:0px; width:100%; visibility: visible; opacity: 1;}
    100% {left:-100%; width:100%; visibility: hidden; opacity: 0.5;}
}

@-webkit-keyframes pagePushOutTransition /* Safari and Chrome */
{
    0%   {left:0px; width:100%; visibility: visible; opacity: 1;}
    100% {left:-100%; width:100%; visibility: hidden; opacity: 0.5;}
}
    • 0