torch2424/angularAnimateCssExperiment.html

## angularAnimateCssExperiment.html
<!DOCTYPE html>
<!-- HTML5 Hello world by kirupa - http://www.kirupa.com/html5/getting_your_feet_wet_html5_pg1.htm -->
<html lang="en-us">

<head>
<meta charset="utf-8">
<title>Hello...</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<style type="text/css">
  * {
    box-sizing: border-box;
  }

  html, body {
    margin: 0;
    padding: 0;
  }

  h1 {
    margin: 0;
  }

	.screen1 {
	  position: absolute;
		background-color: blue;
	}

	.screen1.ng-hide-remove {
		animation: slideInLeft 1s;
	}

	.screen1.ng-hide-add {
		position: absolute;
		z-index: -1;
		animation: slideOutLeft 1s;
	}

	.active {
	  height: 100vh;
		width: 100vw;
		padding: 2em;
	}

	.screen2 {
	  position: absolute;
		background-color: red;
		color: white;
	}

	/*.screen2.ng-hide-remove {*/
	/*	animation: slideInRight 1s;*/
	/*}*/

	/*.screen2.ng-hide-add {*/
	/*	position: absolute;*/
	/*	animation: slideOutRight 1s;*/
	/*}*/

	.screen3 {
	  position: absolute;
	  background-color: green;
	  color: white;
	}

	.screen3.ng-hide-remove {
	  animation: slideInDown 1s;
	}

	.screen3.ng-hide-add {
		position: absolute;
	  animation: slideOutUp 1s;
	}

</style>
</head>

<body ng-app="animate">
	<div ng-controller="main">
		<div
		  class="screen1 animated active"
		  ng-show="active === 'screen1'"
		>
		  <h1>{{ active }}</h1>
		  <button ng-click="aaronIsntLazyLikeMatt(2)">
		  	goto 2
		  </button>
		</div>
		<div
		  class="screen2 animated active"
		  ng-show="active === 'screen2'"
		  ng-style="screen2Style"
		>
		  <h1>{{ active }}</h1>
		  <button ng-click="aaronIsntLazyLikeMatt(1)">goto 1</button>
		  <button ng-click="aaronIsntLazyLikeMatt(3)">goto 3</button>
		</div>
		<div
		  class="screen3 animated active"
		  ng-show="active === 'screen3'"
		>
		  <h1>{{ active }}</h1>
		  <button ng-click="aaronIsntLazyLikeMatt(2)">ayyee lmao</button>
		</div>
	</div>
<script>
(function() {
	angular.module('animate', ['ngAnimate']).controller('main', ['$scope', function($scope) {
	  $scope.active = 'screen2';

	  $scope.aaronIsntLazyLikeMatt = function(screenNum) {
	  	var oldScreenNum = parseInt($scope.active.substring($scope.active.length - 1), 10);
	  	console.log(oldScreenNum);

	  	if (screenNum === 3) {
	  	  $scope.screen2Style = {
	  	    animation: 'slideOutDown 1s',
	  	  };
	  	} else if (screenNum === 1) {
	  	  $scope.screen2Style = {
	  	    animation: 'slideOutRight 1s',
	  	  };
	  	} else if (screenNum === 2 &&
	  	oldScreenNum === 3) {
	  	  $scope.screen2Style = {
	  	    animation: 'slideInUp 1s',
	  	  };
	  	} else if (screenNum === 2 &&
	  	oldScreenNum === 1) {
	  	  $scope.screen2Style = {
	  	    animation: 'slideInRight 1s',
	  	  };
	  	} else {
	  	  console.log('Not a valid transition!', screenNum, oldScreenNum);
	  	}

	  	$scope.active = 'screen' + screenNum;
	  };
	}]);
})();
</script>

</body>
</html>
	<!DOCTYPE html>
	<!-- HTML5 Hello world by kirupa - http://www.kirupa.com/html5/getting_your_feet_wet_html5_pg1.htm -->
	<html lang="en-us">

	<head>
	<meta charset="utf-8">
	<title>Hello...</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" type="text/css" />
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
	<style type="text/css">
	* {
	box-sizing: border-box;
	}

	html, body {
	margin: 0;
	padding: 0;
	}

	h1 {
	margin: 0;
	}

	.screen1 {
	position: absolute;
	background-color: blue;
	}

	.screen1.ng-hide-remove {
	animation: slideInLeft 1s;
	}

	.screen1.ng-hide-add {
	position: absolute;
	z-index: -1;
	animation: slideOutLeft 1s;
	}

	.active {
	height: 100vh;
	width: 100vw;
	padding: 2em;
	}

	.screen2 {
	position: absolute;
	background-color: red;
	color: white;
	}

	/.screen2.ng-hide-remove {/
	/* animation: slideInRight 1s;*/
	/}/

	/.screen2.ng-hide-add {/
	/* position: absolute;*/
	/* animation: slideOutRight 1s;*/
	/}/

	.screen3 {
	position: absolute;
	background-color: green;
	color: white;
	}

	.screen3.ng-hide-remove {
	animation: slideInDown 1s;
	}

	.screen3.ng-hide-add {
	position: absolute;
	animation: slideOutUp 1s;
	}

	</style>
	</head>

	<body ng-app="animate">
	<div ng-controller="main">
	<div
	class="screen1 animated active"
	ng-show="active === 'screen1'"
	>
	<h1>{{ active }}</h1>
	<button ng-click="aaronIsntLazyLikeMatt(2)">
	goto 2
	</button>
	</div>
	<div
	class="screen2 animated active"
	ng-show="active === 'screen2'"
	ng-style="screen2Style"
	>
	<h1>{{ active }}</h1>
	<button ng-click="aaronIsntLazyLikeMatt(1)">goto 1</button>
	<button ng-click="aaronIsntLazyLikeMatt(3)">goto 3</button>
	</div>
	<div
	class="screen3 animated active"
	ng-show="active === 'screen3'"
	>
	<h1>{{ active }}</h1>
	<button ng-click="aaronIsntLazyLikeMatt(2)">ayyee lmao</button>
	</div>
	</div>
	<script>
	(function() {
	angular.module('animate', ['ngAnimate']).controller('main', ['$scope', function($scope) {
	$scope.active = 'screen2';

	$scope.aaronIsntLazyLikeMatt = function(screenNum) {
	var oldScreenNum = parseInt($scope.active.substring($scope.active.length - 1), 10);
	console.log(oldScreenNum);

	if (screenNum === 3) {
	$scope.screen2Style = {
	animation: 'slideOutDown 1s',
	};
	} else if (screenNum === 1) {
	$scope.screen2Style = {
	animation: 'slideOutRight 1s',
	};
	} else if (screenNum === 2 &&
	oldScreenNum === 3) {
	$scope.screen2Style = {
	animation: 'slideInUp 1s',
	};
	} else if (screenNum === 2 &&
	oldScreenNum === 1) {
	$scope.screen2Style = {
	animation: 'slideInRight 1s',
	};
	} else {
	console.log('Not a valid transition!', screenNum, oldScreenNum);
	}

	$scope.active = 'screen' + screenNum;
	};
	}]);
	})();
	</script>

	</body>
	</html>