torch2424 · May 4, 2017 04:54
diff --git a/angularAnimateCssExperiment.html b/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>