<!DOCTYPE html>
<html>
<head>
<title>Wikitechy AngularJS Tutorials</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js"></script>
<style>
h2 {
border:1px ;
margin-top:15px;
padding:15px;
background:#12AA44;
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
h2.bigger {
font-size:40px;
}
</style>
</head>
<body>
<h1>AngularJS Animation Tutorial</h1>
<div ng-app="aniApp" ng-controller="aniCtrl">
<h2 ng-class="{ 'bigger': big}">
Click the button to toggle small or big.
</h2>
<button ng-click="big = !big">Set big = {{ big }}</button>
</div>
<script>
var App = angular.module('aniApp', ['ngAnimate'] );
App.controller('aniCtrl', function($scope) {
$scope.big = false;
});
</script>
</body>
</html>
