How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS
Azoft Blog How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS

How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS

By Valerij Malanin on March 27, 2014

How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS For one of my recent projects I implemented transitions between screens in a web app so they looked and behaved exactly like they do natively on iPhone, watch demo. Since the task was quite interesting, today I'm sharing my solution here. To handle the challenge of emulating native iPhone transitions, I used

  • AngularJS — a flexible JavaScript framework that extends HTML capabilities for web application development;
  • ngRoute — a module providing routing/deeplinking services & directives for AngularJS apps;
  • ngAnimate — a directive in a ng module.

How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS

Why AngularJS?

  • Solid API documentation;
  • Active professional community;
  • Flexibility & extensibility — the framework depends on none of other libraries while works well with them if any is needed;
  • Can be used both as an ordinary library and a fully functional MVM framework.

The only drawback of this solution is the limited browser support. The list of supported browsers:

  • IE10+, IE Mobile 10.0+
  • Chrome 4+, Chrome for Android 32.0+
  • FireFox 5+, FireFox for Android 26.0+
  • Opera 12+, Opera Mobile 12.1+ (Opera Mini is not supported)
  • Safari 4+
  • Android Browser 4.0+ (2.1 — 3.0 — partial support)
  • BlackBerry Browser 7.0+

HTML structure

The HTML structure is quite simple: index.html is the main file which handles all integration and processing issues. All the rest files are patterns for information display. To switch between pattern, we'll use the ngView and ngRoute modules.

index.html

//template
<body ng-controller="indexCtrl as main">
//using ng-view for display template of the current route in this tag
		<div ng-view ng-class="slide"></div>
</body>

main.html

//template for display all users
<div class="content">
	<div class="search-bar">
		<input type="search" ng-model="q" placeholder="filter people..." class="search-input">
	</div>
	<h3 class="nav-list__header">People</h3>
	    <div class="nav-list scroll">
		<ul class="nav-list__container">
		    <li ng-repeat="people in peoples | filter:q"
			class="nav-list__item">
			    <a  href="#/view/{{people.name}}" ng-click="next()" class="next">
				    {{$index+1}}. {{people.name}}
			    </a>
		    </li>
		</ul>
	    </div>
</div>

view.html

//template for display profile user
<div class="content">
	<a ng-click="back()" class="back">Back</a>
	<div class="clear"></div>
	<h1 class="nav-list__header">Profile {{ people.name}}</h1>
	<a href="#/view/message/{{people.name}}" ng-click="next()" class="message">Message</a>
</div>

message.html

//template for display message
<div class="content">
	<a ng-click="back()" class="back">Back</a>
	<div class="clear"></div>
	<h1 class="nav-list__header">Message</h1>
	<!-- text editor-->
</div>

Let's build dependencies between the patterns.

JS structure

app.js

//include module AngularJS
angular.module('app',['ngRoute','ngAnimate'])
	//setting routing for app
	.config(['$routeProvider', function($routeProvide){
	$routeProvide
		.when('/view/:name',{templateUrl:'/template/view.html', controller: viewCtrl})
		.when('/view/message/:name',{ templateUrl: '/template/message.html', controller:messageCtrl})
		.when('/', {templateUrl: '/template/main.html', controller:indexCtrl})
	}])
	//global event handler
	.run(function($rootScope, $window) {
		$rootScope.slide = '';
		$rootScope.$on('$routeChangeStart', function() {
			//event button to move backward
			$rootScope.back = function() {
				$rootScope.slide = 'slide-right';
				$window.history.back();
			}
			//event button item list to move forward
			$rootScope.next = function() {
				$rootScope.slide = 'slide-left';
			}
		});
	});

var data = [{name:'John'},{name:'Mary'},{name:'Mike'},{name:'Adam'},{name:'Julie'},{name:'Juliette'},{name:'Mike'},{name:'Adam'},{name:'Julie'},{name:'Juliette'}];
//controller for template main.html
function indexCtrl($scope){
	$scope.peoples=data;
}
//controller for template view.html
function viewCtrl($scope, $routeParams){
	var key = in_array($routeParams.name,data);
    $scope.people = data[key];
}
//controller for template message.html
function messageCtrl($scope, $routeParams){
    var key = in_array($routeParams.name,data);
    $scope.people = data[key];
}
//search elements in object
function in_array(value,array){
    for(var key in array){
        if(array[key].name == value) return key;
    }
    return false;
}

CSS structure

CSS is in charge of animation.

style.css

/*animate*/
.slide-left.ng-enter,
.slide-left.ng-leave,
.slide-right.ng-enter,
.slide-right.ng-leave {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: inherit;
	-ms-transition: 1.25s ease-in-out;
	-webkit-transition: 1.25s ease-in-out;
	transition:  1.25s ease-in-out;
}
.slide-left.ng-enter {
	z-index: 101;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
.slide-left.ng-enter.ng-enter-active {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.slide-left.ng-leave {
	z-index: 100;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.slide-left.ng-leave.ng-leave-active {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
.slide-right.ng-enter {
	z-index: 100;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
.slide-right.ng-enter.ng-enter-active {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.slide-right.ng-leave {
	z-index: 101;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.slide-right.ng-leave.ng-leave-active {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
VN:F [1.9.22_1171]
Rating: 4.3/5 (20 votes cast)
VN:F [1.9.22_1171]
Rating: +8 (from 20 votes)
How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS, 4.3 out of 5 based on 20 ratings



Request a Free Quote
 
 
 

Please enter the result and submit the form

Content created by Valerij Malanin