anonymoussc/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ##AngularJS Swipe Slider animation

  
## firstSwipe.html
<div class="firstPage page" ng-swipe-left="responsive.selectPage(1)">
    <h2>First page</h2>

    <p>Swipe to the left to go to second page</p>
</div>

## fourthSwipe.html
<div class="page" ng-swipe-right="responsive.selectPage(2)">
    <h2>Fourth page</h2>

    <p>Swipe to the right to go to third page</p>
</div>

## index.html
<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>AngularJS Swipe Slider animation</title>
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
    <link href="style.css" rel="stylesheet"/>
    <link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
</head>

<body>
    <div ng-controller="tabsSwipeCtrl as responsive">
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="button" class="btn btn-default" ng-click="responsive.selectPage(0)"
                        ng-class="{'active': responsive.ngIncludeSelected.index == 0}">First
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" ng-click="responsive.selectPage(1)"
                        ng-class="{'active': responsive.ngIncludeSelected.index == 1}">Second
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" ng-click="responsive.selectPage(2)"
                        ng-class="{'active': responsive.ngIncludeSelected.index == 2}">Third
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" ng-click="responsive.selectPage(3)"
                        ng-class="{'active': responsive.ngIncludeSelected.index == 3}">Fourth
                </button>
            </div>
        </div>
        <div class="ngIncludeRelative">
            <div class="ngIncludeItem" ng-include="responsive.ngIncludeSelected.url"
                 ng-class="{'moveToLeft' : responsive.moveToLeft}"></div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-touch.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

## script.js
function tabsSwipeCtrlFn() {
    var responsive = this;
    responsive.ngIncludeTemplates = [
        {index : 0, name : 'first', url : 'firstSwipe.html'},
        {index : 1, name : 'second', url : 'secondSwipe.html'},
        {index : 2, name : 'third', url : 'thirdSwipe.html'},
        {index : 3, name : 'fourth', url : 'fourthSwipe.html'}
    ];
    responsive.selectPage = selectPage;

    /**
     * Initialize with the first page opened
     */
    responsive.ngIncludeSelected = responsive.ngIncludeTemplates[0];

    /**
     * @name selectPage
     * @desc The function that includes the page of the indexSelected
     * @param indexSelected the index of the page to be included
     */
    function selectPage(indexSelected) {
        if (responsive.ngIncludeTemplates[indexSelected].index > responsive.ngIncludeSelected.index) {
            responsive.moveToLeft = false;
        } else {
            responsive.moveToLeft = true;
        }
        responsive.ngIncludeSelected = responsive.ngIncludeTemplates[indexSelected];
    }
}

var app = angular.module('myApp', ['ngAnimate', 'ngTouch']).controller('tabsSwipeCtrl', tabsSwipeCtrlFn);

## secondSwipe.html
<div class="secondPage page" ng-swipe-left="responsive.selectPage(2)" ng-swipe-right="responsive.selectPage(0)">
    <h2>Second page</h2>

    <p>Swipe to the right to go to first page</p>

    <p>Swipe to the left to go to third page</p>
</div>

## style.css
/* To avoid a horizontal scrollbar when the page enters/leaves the view */
body {
    overflow-x : hidden;
}

.ngIncludeItem {
    position                          : absolute;
    top                               : 35px;
    bottom                            : 0;
    right                             : 0;
    left                              : 0;
    animation-duration                : 0.30s;
    animation-timing-function         : ease-in-out;
    -webkit-animation-duration        : 0.30s;
    -webkit-animation-timing-function : ease-in-out;
}

.page {
    position : inherit;
    top      : 0;
    right    : inherit;
    bottom   : inherit;
    left     : inherit;
}

.firstPage {
    background-color : blue;
}

.secondPage {
    background-color : red;
}

.thirdPage {
    background-color : green;
}

/* When the page enters, slide it from the right */
.ngIncludeItem.ng-enter {
    animation-name         : slideFromRight;
    -webkit-animation-name : slideFromRight;
}

/* When the page enters and moveToLeft is true, slide it from the left(out of the user view) to the right (left corner) */
.ngIncludeItem.moveToLeft.ng-enter {
    animation-name         : slideFromLeft;
    -webkit-animation-name : slideFromLeft;
}

/* When the page leaves, slide it to left(out of the user view) from the left corner,
    in other words slide it from the left(out of the view) to the left corner but in reverse order */
.ngIncludeItem.ng-leave {
    animation-name              : slideFromLeft;
    animation-direction         : reverse;
    -webkit-animation-name      : slideFromLeft;
    -webkit-animation-direction : reverse;
}

/* When the page leaves, slide it to the right(out of the user view) from the the left corner,
    in other words, slide it from the right but in reverse order  */
.ngIncludeItem.moveToLeft.ng-leave {
    animation-name              : slideFromRight;
    animation-direction         : reverse;
    -webkit-animation-name      : slideFromRight;
    -webkit-animation-direction : reverse;
}

@keyframes slideFromRight {
    0% {
        transform : translateX(100%);
    }

    100% {
        transform : translateX(0);
    }
}

@keyframes slideFromLeft {
    0% {
        transform : translateX(-100%);
    }

    100% {
        transform : translateX(0);
    }
}

@-webkit-keyframes slideFromRight {
    0% {
        -webkit-transform : translateX(100%);
    }

    100% {
        -webkit-transform : translateX(0);
    }
}

@-webkit-keyframes slideFromLeft {
    0% {
        -webkit-transform : translateX(-100%);
    }

    100% {
        -webkit-transform : translateX(0);
    }
}

## thirdSwipe.html
<div class="thirdPage page" ng-swipe-left="responsive.selectPage(3)" ng-swipe-right="responsive.selectPage(1)">
    <h2>Third page</h2>

    <p>Swipe to the left to go to fourth page</p>

    <p>Swipe to the right to go to second page</p>
</div>
	<div class="firstPage page" ng-swipe-left="responsive.selectPage(1)">
	<h2>First page</h2>

	<p>Swipe to the left to go to second page</p>
	</div>
	<div class="page" ng-swipe-right="responsive.selectPage(2)">
	<h2>Fourth page</h2>

	<p>Swipe to the right to go to third page</p>
	</div>
	<!DOCTYPE html>
	<html ng-app="myApp">

	<head>
	<title>AngularJS Swipe Slider animation</title>
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
	<link href="style.css" rel="stylesheet"/>
	<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
	</head>

	<body>
	<div ng-controller="tabsSwipeCtrl as responsive">
	<div class="btn-group btn-group-justified">
	<div class="btn-group">
	<button type="button" class="btn btn-default" ng-click="responsive.selectPage(0)"
	ng-class="{'active': responsive.ngIncludeSelected.index == 0}">First
	</button>
	</div>
	<div class="btn-group">
	<button type="button" class="btn btn-default" ng-click="responsive.selectPage(1)"
	ng-class="{'active': responsive.ngIncludeSelected.index == 1}">Second
	</button>
	</div>
	<div class="btn-group">
	<button type="button" class="btn btn-default" ng-click="responsive.selectPage(2)"
	ng-class="{'active': responsive.ngIncludeSelected.index == 2}">Third
	</button>
	</div>
	<div class="btn-group">
	<button type="button" class="btn btn-default" ng-click="responsive.selectPage(3)"
	ng-class="{'active': responsive.ngIncludeSelected.index == 3}">Fourth
	</button>
	</div>
	</div>
	<div class="ngIncludeRelative">
	<div class="ngIncludeItem" ng-include="responsive.ngIncludeSelected.url"
	ng-class="{'moveToLeft' : responsive.moveToLeft}"></div>
	</div>
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-touch.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
	<script src="script.js"></script>
	</body>

	</html>
	function tabsSwipeCtrlFn() {
	var responsive = this;
	responsive.ngIncludeTemplates = [
	{index : 0, name : 'first', url : 'firstSwipe.html'},
	{index : 1, name : 'second', url : 'secondSwipe.html'},
	{index : 2, name : 'third', url : 'thirdSwipe.html'},
	{index : 3, name : 'fourth', url : 'fourthSwipe.html'}
	];
	responsive.selectPage = selectPage;

	/**
	* Initialize with the first page opened
	*/
	responsive.ngIncludeSelected = responsive.ngIncludeTemplates[0];

	/**
	* @name selectPage
	* @desc The function that includes the page of the indexSelected
	* @param indexSelected the index of the page to be included
	*/
	function selectPage(indexSelected) {
	if (responsive.ngIncludeTemplates[indexSelected].index > responsive.ngIncludeSelected.index) {
	responsive.moveToLeft = false;
	} else {
	responsive.moveToLeft = true;
	}
	responsive.ngIncludeSelected = responsive.ngIncludeTemplates[indexSelected];
	}
	}

	var app = angular.module('myApp', ['ngAnimate', 'ngTouch']).controller('tabsSwipeCtrl', tabsSwipeCtrlFn);
	<div class="secondPage page" ng-swipe-left="responsive.selectPage(2)" ng-swipe-right="responsive.selectPage(0)">
	<h2>Second page</h2>

	<p>Swipe to the right to go to first page</p>

	<p>Swipe to the left to go to third page</p>
	</div>
	/* To avoid a horizontal scrollbar when the page enters/leaves the view */
	body {
	overflow-x : hidden;
	}

	.ngIncludeItem {
	position : absolute;
	top : 35px;
	bottom : 0;
	right : 0;
	left : 0;
	animation-duration : 0.30s;
	animation-timing-function : ease-in-out;
	-webkit-animation-duration : 0.30s;
	-webkit-animation-timing-function : ease-in-out;
	}

	.page {
	position : inherit;
	top : 0;
	right : inherit;
	bottom : inherit;
	left : inherit;
	}

	.firstPage {
	background-color : blue;
	}

	.secondPage {
	background-color : red;
	}

	.thirdPage {
	background-color : green;
	}

	/* When the page enters, slide it from the right */
	.ngIncludeItem.ng-enter {
	animation-name : slideFromRight;
	-webkit-animation-name : slideFromRight;
	}

	/* When the page enters and moveToLeft is true, slide it from the left(out of the user view) to the right (left corner) */
	.ngIncludeItem.moveToLeft.ng-enter {
	animation-name : slideFromLeft;
	-webkit-animation-name : slideFromLeft;
	}

	/* When the page leaves, slide it to left(out of the user view) from the left corner,
	in other words slide it from the left(out of the view) to the left corner but in reverse order */
	.ngIncludeItem.ng-leave {
	animation-name : slideFromLeft;
	animation-direction : reverse;
	-webkit-animation-name : slideFromLeft;
	-webkit-animation-direction : reverse;
	}

	/* When the page leaves, slide it to the right(out of the user view) from the the left corner,
	in other words, slide it from the right but in reverse order */
	.ngIncludeItem.moveToLeft.ng-leave {
	animation-name : slideFromRight;
	animation-direction : reverse;
	-webkit-animation-name : slideFromRight;
	-webkit-animation-direction : reverse;
	}

	@keyframes slideFromRight {
	0% {
	transform : translateX(100%);
	}

	100% {
	transform : translateX(0);
	}
	}

	@keyframes slideFromLeft {
	0% {
	transform : translateX(-100%);
	}

	100% {
	transform : translateX(0);
	}
	}

	@-webkit-keyframes slideFromRight {
	0% {
	-webkit-transform : translateX(100%);
	}

	100% {
	-webkit-transform : translateX(0);
	}
	}

	@-webkit-keyframes slideFromLeft {
	0% {
	-webkit-transform : translateX(-100%);
	}

	100% {
	-webkit-transform : translateX(0);
	}
	}
	<div class="thirdPage page" ng-swipe-left="responsive.selectPage(3)" ng-swipe-right="responsive.selectPage(1)">
	<h2>Third page</h2>

	<p>Swipe to the left to go to fourth page</p>

	<p>Swipe to the right to go to second page</p>
	</div>