<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
<script src="app.js"></script>
</head>
<body class="container" ng-app="animateApp" ng-controller="mainController">
<header class="text-center">
<h1>Animating Angular Apps<small>ngShow and ngHide</small></h1>
<a class="btn btn-primary" href="#" ng-click="lions = !lions" ng-class="{ active: lions }">Toggle Lions</a>
<a class="btn btn-success" href="#" ng-click="cranes = !cranes" ng-class="{ active: cranes }">Toggle Cranes</a>
</header>
<div class="row">
<div class="col-xs-6">
<div class="jumbotron" ng-show="lions">
<img src="http://scotch.io/wp-content/uploads/2014/07/14514600585_49ba9f860c.jpg" class="img-responsive img-thumbnail">
</div>
</div>
<div class="col-xs-6">
<div class="jumbotron" ng-show="cranes">
<img src="http://scotch.io/wp-content/uploads/2014/07/cranes.jpg" class="img-responsive img-thumbnail">
</div>
</div>
</div>
</body>
</html>
angular.module('animateApp', ['ngAnimate'])
.controller('mainController', function($scope) {
// set the default states for lions and cranes
$scope.lions = false;
$scope.cranes = false;
});
header { margin-bottom:50px; }
h1 { margin-bottom:30px; }
h1 small { display:block; }
/* when hiding the thing */
.ng-hide-add {
-webkit-animation:0.5s lightSpeedOut ease;
animation:0.5s lightSpeedOut ease;
}
/* when showing the thing */
.ng-hide-remove {
-webkit-animation:0.5s flipInX ease;
animation:0.5s flipInX ease;
}
/* ANIMATIONS (FROM ANIMATE.CSS) */
/* flip in */
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
-ms-transform: perspective(400px);
transform: perspective(400px);
}
}
/* light speed out */
@-webkit-keyframes lightSpeedOut {
0% {
opacity: 1;
}
100% {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
0% {
opacity: 1;
}
100% {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
-ms-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}