Phonegap/cordova delay in page transitions

lionel.web

Member
I have made a test app for android in phonegap.
All the different pages, are in one html page.
When I press the link to go to a second page, the page transition (css3) delays to begin.
Is ti possible to fix this?
It's not the touch delay problem (I have already used fastclick).
 

lionel.web

Member
Ok, that's the code:

The html Part
-----------------
Code:
<!--HOME PAGE-->
<div id="home_page" class="page z100 visible">
	<div class="gen_pages_inner">
		<a href="javascript:start_slider('home_to_story');" class="button play_story"></a>
		<a href="javascript:start_slider('home_to_settings');" class="button settings"></a>
	</div>
</div>
<!--HOME PAGE-->


<!--STORY PAGE-->
<div class="bb-custom-wrapper z60" id="story_pages">
	<div id="bb-bookblock" class="bb-bookblock">
	
    	<div class="bb-item" id="item1">
			<div class="content page1" >
				<div class="dialog_top diag_page0">
				<p>page-1 Αντίθετα με αυτό που θεωρεί η πλειοψηφία, το Lorem Ipsum δεν είναι απλά ένα τυχαίο κείμενο. Οι ρίζες του βρίσκονται σε ένα κείμενο Λατινικής λογοτεχνίας του 45 π.Χ., φτάνοντας την ηλικία του πάνω από 2000 έτη. Ο Richard McClintock, καθηγητής Λατινικών στο κολλέγιο Hampden-Dydney στην Βιρτζίνια, αναζήτησε μία από τις πιο σπάνιες Λατινικές λέξεις, την consectetur, από ένα απόσπασμα του Lorem Ipsum, και ανάμεσα σε όλα τα έργα της κλασσικής λογοτεχνίας, ανακάλυψε την αναμφισβήτητη πηγή του.</p>
				</div>
			</div>
		</div>


		<div class="bb-item" id="item2">
			<div class="content page2">
               	<div class="dialog_top diag_page1">
				<p>page-2 Αντίθετα με αυτό που θεωρεί η πλειοψηφία, το Lorem Ipsum δεν είναι απλά ένα τυχαίο κείμενο. Οι ρίζες του βρίσκονται σε ένα κείμενο Λατινικής λογοτεχνίας του 45 π.Χ., φτάνοντας την ηλικία του πάνω από 2000 έτη. Ο Richard McClintock, καθηγητής Λατινικών στο κολλέγιο Hampden-Dydney στην Βιρτζίνια, αναζήτησε μία από τις πιο σπάνιες Λατινικές λέξεις, την consectetur, από ένα απόσπασμα του Lorem Ipsum, και ανάμεσα σε όλα τα έργα της κλασσικής λογοτεχνίας, ανακάλυψε την αναμφισβήτητη πηγή του.</p>
				</div>
			</div>
		</div>


	</div>

		<div id="menu_big">
        <a id="slider-home"  href="javascript:start_slider('story_to_home');" class="slider-buttons">h</a>
		<a id="slider-play"  href="javascript:playAudio();" class="slider-buttons show">p</a>
		<a id="slider-pause" href="javascript:pauseAudio();" class="slider-buttons hide">pp</a>
		<a id="slider-stop"  href="javascript:stopAudio();" class="slider-buttons">s</a>
		<a id="slider-prev"  class="slider-buttons disable">l</a>
		<a id="slider-next"  class="slider-buttons">r</a>
		</div>


	</div>
<!--STORY PAGE-->

And the Javasript
--------------------
document.addEventListener("deviceready", onDeviceReady, false);
////////////////////////////////////////
function onDeviceReady()
{FastClick.attach(document.body);
}
////////////GENERAL VARIABLES////////////////
	var loading_big=$('#loading_big');

	var page_home=$('#home_page');
	var page_settings=$('#settings_page');
	var story_pages=$('#story_pages');

	var current=0; // Initial Page
	var all_pages=4; //0,1,2,3
	var stop_flipping=true;

	var my_media = null;
////////////////////////////////////////////////

////////////SHOW/HIDE PLAY/PAUSE BUTTONS
function play_pause_show_hide(x){
if (x=='pause'){
$('#slider-play').addClass('hide').removeClass('show');$('#slider-pause').addClass('show').removeClass('hide');}
if (x=='play'){
$('#slider-pause').addClass('hide').removeClass('show');$('#slider-play').addClass('show').removeClass('hide');}
}
////////////////
function playAudio(src) {
	if (my_media == null) {
		var src='sounds/page0.mp3';
		if(device.platform.toLowerCase() === "android") {src="/android_asset/www/" + src;}
    	my_media = new Media(src,onSuccess);
    } 
	my_media.play();
	play_pause_show_hide('pause');
}
// Pause audio
function pauseAudio() {
if (my_media) {my_media.pause();play_pause_show_hide('play');}
}
// Stop audio
function stopAudio() {
if (my_media) {my_media.stop();play_pause_show_hide('play');}
}
//////////////////////////
function onSuccess() {
		play_pause_show_hide('play');
		my_media.release();
		
		automatic_value = window.localStorage.getItem( 'automatic' );
		if ( (current<all_pages) && automatic_value=='yes' && stop_flipping==false) {
		$("#slider-next").trigger("click");
		}
}
///////////////////////////
function menu_big_small(x){
if (x=='big'){
	$('#slider-stop').show();
	$('#slider-prev').show();
	$('#slider-next').show();
	$('#menu_big').removeClass('small');
	}
if (x=='small'){
	$('#slider-stop').hide();
	$('#slider-prev').hide();
	$('#slider-next').hide();
	$('#menu_big').addClass('small');
	}
}
/////////////////////////////////
function start_slider(direction){
stopAudio();
my_media=null;

$('#menu_big').hide();
$('#menu_big').removeClass();

loading_big.addClass('loadermove');

	if(direction=='home_to_story'){

		current=0;
		stop_flipping=true;
		automatic_value = window.localStorage.getItem( 'automatic' );

		if (automatic_value=='yes'){
		stop_flipping=false;
		menu_big_small('small');
		} 
		else {
		menu_big_small('big');
		}

		$('#menu_big').show();
		$('#bb-bookblock').bookblock('first');

				loading_big.one('webkitAnimationEnd animationend ',   
			    function() {
				page_home.removeClass('z100').addClass('page z60').addClass('flow out');
				});

				page_home.one('webkitAnimationEnd animationend ',   
			    function() {
				$(this).removeClass('flow out').removeClass('visible');
				story_pages.addClass('scaleUpCenter').addClass('visible');
				loading_big.removeClass();
				});


				story_pages.one('webkitAnimationEnd animationend ',   
			    function() {
				$(this).removeClass('scaleUpCenter');

					$('.diag_page0').addClass('movedialog');
					if (automatic_value=='yes'){playAudio();}

				});

	}
	if(direction=='story_to_home'){
		stop_flipping=true;

				loading_big.one('webkitAnimationEnd animationend ',   
			    function() {
				story_pages.removeClass('z100').addClass('page z60').addClass('flow out reverse');
				});

				story_pages.one('webkitAnimationEnd animationend ',   
			    function() {
				$(this).removeClass('flow out reverse').removeClass('visible');
				page_home.addClass('scaleUpCenter').addClass('visible');
				loading_big.removeClass('loadermove');
				$('.dialog_top').removeClass('movedialog');
				});

				page_home.one('webkitAnimationEnd animationend ',   
			    function() {
				$(this).removeClass('scaleUpCenter');
				});





	}



	if(direction=='home_to_settings'){
	
				loading_big.one('webkitAnimationEnd animationend ',   
			    function() {
				page_home.removeClass('z100').addClass('page z60').addClass('scaleDownCenter');
				page_settings.removeClass('z60').addClass('z100 visible').addClass('scaleUpCenter');
				loading_big.removeClass('loadermove');
				});


	automatic_value = window.localStorage.getItem( 'automatic' );
	if (automatic_value=='yes'){$('#Toggle').prop( "checked", true );} 
	else {$('#Toggle').prop( "checked", false );}

				page_settings.one('webkitAnimationEnd animationend ',   
			    function() {
				$(this).removeClass('scaleUpCenter');
				page_home.removeClass('visible scaleDownCenter');
				});
	}
		

	if(direction=='settings_to_home'){
	
	var automatic=$('#Toggle');
	if (automatic.is(':checked')){window.localStorage.setItem( 'automatic', 'yes');}
	else {window.localStorage.setItem( 'automatic', 'no');}

				loading_big.one('webkitAnimationEnd animationend ',   
			    function() {
				page_settings.removeClass('z100').addClass('page z60').addClass('scaleDownCenter');
				page_home.addClass('z100 visible').addClass('scaleUpCenter');
				loading_big.removeClass('loadermove');
				});

				page_home.one('webkitAnimationEnd animationend ',   
			    function() {
				$(this).removeClass('scaleUpCenter z60');
				page_settings.removeClass('visible scaleDownCenter');
				});
	}





}
///////////////
 
Last edited by a moderator:

lionel.web

Member
Also, the css code with the animations
--------------------------------------------
Code:
html,body {width:100%;height: 100%; overflow:hidden; margin:0;padding:0 }
body{font-family:Arial, Helvetica, sans-serif; background-color:#000}
.show{display:block !important}
.hide{display:none !important}

.z100{z-index:100 !important;} 
.z10{z-index:10 !important;}
.z60{z-index:60 !important;}


.page1{background:url(../images/1.jpg) no-repeat; background-size:cover}
.page2{background:url(../images/2.jpg) no-repeat; background-size:cover}
.page3{background:url(../images/3.jpg) no-repeat; background-size:cover}
.page4{background:url(../images/4.jpg) no-repeat; background-size:cover}
.page5{background:url(../images/5.jpg) no-repeat; background-size:cover}


.dialog_top{width:95%; height:auto; min-height:10px; background-color:rgba(0,0,0,0.6); color:#fff; border-radius:10px; display:block;  position:absolute; left:0; right:0; margin:0 auto; margin-top:-200px  }
.dialog_top p{text-align:justify; font-size:16px;padding:10px 25px; margin:0}

.dialog_top.movedialog{
-webkit-animation-name: dialogMove;
-webkit-animation-duration: 0.3s;
-webkit-animation-fill-mode: both;

-moz-animation-name: dialogMove;
-moz-animation-duration: 0.3s;
-moz-animation-fill-mode: both;
}
@-webkit-keyframes dialogMove
{0% {}100% {-webkit-transform:translate3d(0px,210px,0);}}
@-moz-keyframes dialogMove
{0% {}100% {-moz-transform:translate3d(0,210px,0);}}




.slider-buttons{background: url(../images/sprite.png) no-repeat;}
.slider-buttons.disable{opacity:0.2}
#slider-home{ background-position:-50px 0px;}
#slider-play{background-position:-100px 0px;}
#slider-pause{background-position:0px 0px;}
#slider-stop{background-position:-250px 0px;}
#slider-prev{background-position:-200px 0px; }	
#slider-next{background-position:-150px 0px; }	
/*********HOME PAGE/******************/
#home_page{background:url(../images/back1.jpg) no-repeat; background-size:cover;}

#story_pages,#home_page,#settings_page{width:100%; height:100%; position:absolute !important; visibility:hidden}
.gen_pages_inner{max-width:800px; width:auto; height:auto; margin:0 auto; padding-top:50px; text-align:center;}



.button{background:url(../images/sprite.png) no-repeat;text-indent:-1000px; display:inline-block; width:350px; height:115px; margin-bottom:10px; margin-right:10px; margin-left:10px;  }
.button.play_story{background-position:0 -395px;}
.button.settings{background-position:0 -280px;}
.button.about{background-position:0 -50px;}
.button.credits{background-position:0 -165px;}


.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
	visibility: visible; 
z-index:0;
    -webkit-transition-property: top, bottom;
    transition-property: top, bottom;
    -webkit-transition-duration: .2s, .2s;
    transition-duration: .2s, .2s;
    -webkit-transition-timing-function: linear, linear;
    transition-timing-function: linear, linear;
    -webkit-overflow-scrolling: touch;
	}
.visible{visibility:visible !important;}
/*********HOME PAGE/******************/

/*********SETTINGS PAGE/******************/
#settings_page{z-index:60; position:relative; background:url(../images/back2.jpg) no-repeat; background-size:cover;
visibility:hidden}
#settings_page p{font-size:50px; text-shadow:1px 1px 1px #000; font-weight:bold; color:#933; display:inline-block; margin-right:100px; }
#settings_page h2{font-size:100px; text-shadow:3px 3px 2px #000; font-weight:bold; color:#39C; margin:0 auto;  }
#settings_button{display:block; width:160px; height:33px; border-radius:3px; text-decoration:none; 
	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	border:1px solid #999; margin:0 auto; color:#000; text-shadow:1px 1px 1px #999; padding-top:6px; font-weight:bold;
	font-size:14px; margin-top:50px;
	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

/*********SETTINGS PAGE/******************/



/*********************************************************************/
.flow {
	-webkit-transform-origin: 50% 30%;
	-moz-transform-origin: 50% 30%;	
	transform-origin: 50% 30%;	
}
.flow.out {
	-webkit-transform: translateX(-100%) scale(.5);
	-webkit-animation-name: flowouttoleft;
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 350ms;
	-moz-transform: translateX(-100%) scale(.5);
	-moz-animation-name: flowouttoleft;
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 350ms;
	transform: translateX(-100%) scale(.5);
	animation-name: flowouttoleft;
	animation-timing-function: ease;
	animation-duration: 350ms;
}
.flow.in {
	-webkit-transform: translateX(0) scale(1);
	-webkit-animation-name: flowinfromright;
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 350ms;
	-moz-transform: translateX(0) scale(1);
	-moz-animation-name: flowinfromright;
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 350ms;
	transform: translateX(0) scale(1);
	animation-name: flowinfromright;
	animation-timing-function: ease;
	animation-duration: 350ms;


}
.flow.out.reverse {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: flowouttoright;
	-moz-transform: translateX(100%);
	-moz-animation-name: flowouttoright;
	transform: translateX(100%);
	animation-name: flowouttoright;
}
.flow.in.reverse {
	-webkit-animation-name: flowinfromleft;
	-moz-animation-name: flowinfromleft;
	animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
    0% { -webkit-transform: translateX(0) scale(1); }
	60%, 70% { -webkit-transform: translateX(0) scale(.5); }
    100% { -webkit-transform: translateX(-100%) scale(.5); }
}
@-moz-keyframes flowouttoleft {
    0% { -moz-transform: translateX(0) scale(1); }
	60%, 70% { -moz-transform: translateX(0) scale(.5); }
    100% { -moz-transform:  translateX(-100%) scale(.5); }
}
@keyframes flowouttoleft {
    0% { transform: translateX(0) scale(1); }
	60%, 70% { transform: translateX(0) scale(.5); }
    100% { transform:  translateX(-100%) scale(.5); }
}
@-webkit-keyframes flowouttoright {
    0% { -webkit-transform: translateX(0) scale(1); }
	60%, 70% { -webkit-transform: translateX(0) scale(.5); }
    100% { -webkit-transform:  translateX(100%) scale(.5); }
}
@-moz-keyframes flowouttoright {
    0% { -moz-transform: translateX(0) scale(1); }
	60%, 70% { -moz-transform: translateX(0) scale(.5); }
    100% { -moz-transform:  translateX(100%) scale(.5); }
}
@keyframes flowouttoright {
    0% { transform: translateX(0) scale(1); }
	60%, 70% { transform: translateX(0) scale(.5); }
    100% { transform:  translateX(100%) scale(.5); }
}
@-webkit-keyframes flowinfromleft {
    0% { -webkit-transform: translateX(-100%) scale(.7); }
	30%, 40% { -webkit-transform: translateX(0) scale(.7); }
    100% { -webkit-transform: translateX(0) scale(1); }
}
@-moz-keyframes flowinfromleft {
    0% { -moz-transform: translateX(-100%) scale(.7); }
	30%, 40% { -moz-transform: translateX(0) scale(.7); }
    100% { -moz-transform: translateX(0) scale(1); }
}
@keyframes flowinfromleft {
    0% { transform: translateX(-100%) scale(.7); }
	30%, 40% { transform: translateX(0) scale(.7); }
    100% { transform: translateX(0) scale(1); }
}
@-webkit-keyframes flowinfromright {
    0% { -webkit-transform: translateX(100%) scale(.7); }
	30%, 40% { -webkit-transform: translateX(0) scale(.7); }
    100% { -webkit-transform: translateX(0) scale(1); }
}
@-moz-keyframes flowinfromright {
    0% { -moz-transform: translateX(100%) scale(.7); }
	30%, 40% { -moz-transform: translateX(0) scale(.7); }
    100% { -moz-transform: translateX(0) scale(1); }
}
@keyframes flowinfromright {
    0% { transform: translateX(100%) scale(.7); }
	30%, 40% { transform: translateX(0) scale(.7); }
    100% { transform: translateX(0) scale(1); }
}
/*********************/
.scaleDownCenter {
-webkit-animation: scaleDownCenter 350ms ease-in both;
animation: scaleDownCenter 350ms ease-in both;
}

.scaleUpCenter {
-webkit-animation: scaleUpCenter 350ms ease-out both;
animation: scaleUpCenter 350ms ease-out both;
}


@-webkit-keyframes scaleDownCenter {from { }to { opacity: 0; -webkit-transform: scale(.5); }}
@keyframes scaleDownCenter {from { }to { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5); }}
@-webkit-keyframes scaleUpCenter {from { opacity: 0; -webkit-transform: scale(.5); }}
@keyframes scaleUpCenter {from { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5); }}

/************************************/
 
Last edited by a moderator:
Top