LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  AngularJS - UI Router - Example 1

  
  

  
  



	
	

AngularJS && UI.Router

Example 1: Transition between state

default content
CSS
html,
body {
  background: #F9F7F6;
  font-family: 'Open Sans';
  font-size: 12px;
  line-height: 1.25;
}
header {
  text-align: center;
  padding: 2em;
  color: #404D5B;
}
header h1 {
  font-size: 4em;
  line-height: .2;
}
header h2 {
  font-size: 1.5em;
  font-weight: normal;
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}
nav {
  text-align: center;
}
nav ul {
  list-style: none;
  padding: 2em;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
  padding: 5px;
  font-size: 1.3em;
  border: 3px solid #F9F7F6;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  text-transform: uppercase;
  color: #404D5B;
}
nav ul li a.active {
  border: 3px solid #404D5B;
}
nav ul li a:hover {
  background: #404D5B;
  color: #F9F7F6;
}
.content {
  width: 100%;
  height: 370px;
  position: relative;
  margin: 20px auto;
  overflow: hidden;
}
.content .tab {
  overflow: hidden;
  padding: 1em 4em;
  height: 370px;
  font-size: 2em;
  line-height: 1.4;
}
.content .tab1 {
  background: #34495E;
  color: #B4B4B4;
}
.content .tab2 {
  background: #E74C3C;
  color: #fff;
}
.content .tab3 {
  background: #bbc3c3;
  color: #404D5B;
}
.content .tab4 {
  background: #F9F7F6;
}
.slide-left.ng-enter,
.slide-left.ng-leave,
.slide-right.ng-enter,
.slide-right.ng-leave,
.slide-top.ng-enter,
.slide-top.ng-leave,
.slide-bottom.ng-enter,
.slide-bottom.ng-leave {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.slide-left.ng-enter.ng-enter-active {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
.slide-left.ng-leave {
  z-index: 100;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
.slide-left.ng-leave-active {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
.slide-right.ng-enter {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
.slide-right.ng-enter-active {
  position: absolute;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
.slide-right.ng-leave-active {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
.slide-top.ng-enter {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.slide-top.ng-enter-active {
  position: absolute;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}
.slide-top.ng-leave-active {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.slide-bottom.ng-enter-active {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}
.slide-bottom.ng-leave {
  z-index: 100;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}
.slide-bottom.ng-leave-active {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
JS
angular
	.module('DemoApp', ['ui.router', 'ngAnimate'])

	.config(function($stateProvider, $urlRouterProvider)
	{
		$stateProvider
			.state('tab1', {
				name: 'tab1',
				url: '/tab1',
				template: '

Caerphilly fromage cheeseburger. Goat fromage frais halloumi melted cheese cheese and biscuits macaroni cheese babybel ricotta. Roquefort croque monsieur babybel fromage frais chalk and cheese bavarian bergkase cream cheese emmental. When the cheese comes out everybody\'s happy camembert de normandie fromage frais ricotta.

' }) .state('tab2', { name: 'tab2', url: '/tab2', template: '

Airedale hard cheese roquefort. Paneer pepper jack jarlsberg st. agur blue cheese bavarian bergkase macaroni cheese croque monsieur cauliflower cheese. Bavarian bergkase cheesy grin port-salut taleggio stinking bishop cheese and biscuits rubber cheese blue castello. Everyone loves.

' }) .state('tab3', { name: 'tab3', url: '/tab3', template: '

Cheese and biscuits stinking bishop jarlsberg. Boursin melted cheese emmental cheeseburger cheese slices mozzarella cream cheese say cheese. Macaroni cheese fondue mozzarella cheese strings cheese triangles when the cheese comes out everybody\'s happy cheese on toast croque monsieur. Stinking bishop rubber cheese when the cheese comes out everybody\'s happy paneer cheesy feet.

' }) .state('tab4', { name: 'tab4', url: '/tab4', template: '

Bocconcini hard cheese stinking bishop. Cheesecake gouda cheese and biscuits red leicester airedale cheeseburger say cheese pecorino. St. agur blue cheese cheese triangles emmental pecorino monterey jack cut the cheese emmental cheese slices. Manchego cow cheeseburger airedale who moved my cheese cottage cheese airedale feta. Parmesan.

' }); }) .controller('DemoController', function( $scope, $window, $state ) { $scope.transition = 'slide-left'; $scope.tabs = ['tab1', 'tab2', 'tab3', 'tab4']; $scope.currentIndex = -1; $scope.maxIndex = $scope.tabs.length; $scope.left = false; next(); function next() { $scope.currentIndex = $scope.currentIndex+1 < $scope.maxIndex ? $scope.currentIndex+1 : 0; var name = $scope.tabs[$scope.currentIndex]; $state.go( name ); } $scope.left = function() { $scope.transition = 'slide-left'; next(); } $scope.right = function() { $scope.transition = 'slide-right'; next(); } $scope.top = function() { $scope.transition = 'slide-top'; next(); } $scope.bottom = function() { $scope.transition = 'slide-bottom'; next(); } }) ;
Host Instantly Drag and Drop Website Builder

 

Description

AngularJS - UI Router - Transition between state - Example 1
Term
Mon, 11/27/2017 - 22:05

Related Codes

Pen ID
Pen ID
Pen ID