Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An angular animate, and animate.css experiment with @MasterKale
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment