Android page transition

ionic-v1
1

It would be great to have the Android page transition like app.js from the Kik guys.
http://youtube.kik.com/ (View this page on Android or Chrome inspector with Android emulator)
i think they use scale transform for Android.

2

implement it :wink: and share it with us :slight_smile:

3

You can have them right now:

If I’m looking at a right example you want a fade transition effect.

4

But we can do it with css3 only, i checked the js and the css of IONIC and it’s not easy to implement it.
here the css3 i used to make it look like android transition in a app i did previously with bootstrap caroussel.

@-webkit-keyframes scaleDown {
	to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleDown {
	to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleDown {
	to { opacity: 0; transform: scale(.8); }
}

@-webkit-keyframes scaleUp {
	from { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleUp {
	from { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleUp {
	from { opacity: 0; transform: scale(.8); }
}

.carousel-pop .active.right {
	left: 0;
	z-index: 2;
	-webkit-animation: scaleDown .2s ease both;
	-moz-animation: scaleDown .2s ease both;
	animation: scaleDown .2s ease both;
	/*-webkit-transform: translate3d(0,0,0); */
}

.carousel-pop .next {
	left: 0;
	z-index: 1;
}

.carousel-pop .prev {
	left: 0;
	z-index: 1;
}

.carousel-pop .carousel-inner > .next {
  	-webkit-animation: scaleUp .2s ease both;
	-moz-animation: scaleUp .2s ease both;
	animation: scaleUp .2s ease both; 
	/*-webkit-transform: translate3d(0,0,0); */
}
5

I just try to make the Android Scale Up and Scale Down transition.

I did it work with pure css animation and it’s looking great, But for testing it, i sould set the config this way.
$ionicConfigProvider.views.transition('none');

My Scale Up work perfectlty. but logically, the Scale Down can not work since i put the ionicConfigProvider.views.transition to none and the old page is removed with no timeout.

If you want to help, fork what i did put on Github. there’s more explanation and you can view the complete CSS code.
https://github.com/onigetoc/Ionic-Android-Transition-scale

Demo, do note work for tab, it for navigation transition.
Demo Codepen

By the way, i did my Readme.md file on Github with my own project HTML to MARKDOWN.
http://editconvert.com/