Angularjs 1.4.5: animation using ng-enter not working - css

Question

I am new to AngularJS and I am working on creating fadein animation. I added all the required js files in my my header and element.ng-enter and element.ng-enter-ng-enter.active classes in css file as per documents from AngularJS. When I browse the URL, I dont get fadein effects. Here is my JSFiddle link.
HTML code:
<div ng-app="Dashboard">
<div id="dashboard" ng-controller="dashboardCtrl">
<div class="app-nav">
<button onclick="location.href = '/';">Dashboard</button>
</div>
<br>
<div class="app-nav">
<button onclick="location.href = 'Applications';">Healthchecks</button>
</div>
<br>
<div class="app-nav">
<button>Contact US</button>
</div>
<br>
</div>
</div>
JS Script:
angular.module('Dashboard', ['ngAnimate'])
.controller('dashboardCtrl', function ($scope) {
});
CSS:
#dashboard {
margin-top: 50px;
}
.app-nav {
max-width: 350px;
min-height: 75px !important;
margin: 0 auto;
}
.app-nav button:hover {
background-color: #154995;
}
.app-nav button {
min-width: 350px;
min-height: 75px;
}
button.ng-enter {
transition: 3s linear all;
opacity: 0;
}
button.ng-enter.ng-enter-active {
opacity: 2;
}

Answer 1

Do not mix pure javascript in your html file with angular. You should replace onclick with ng-click because then angular can inject correct class to div and show you animation
index.html
<div ng-app="Dashboard">
<div id="dashboard" ng-controller="dashboardCtrl">
<div class="app-nav">
<button ng-click="functionOne()">Dashboard</button>
</div>
<br>
<div class="app-nav">
<button ng-click="functionTwo()">Healthchecks</button>
</div>
<br>
<div class="app-nav">
<button>Contact US</button>
</div>
<br>
</div>
</div>
controller.js
(function () {
'use strict';
angular
.module('Dashboard')
.controller('dashboardCtrl', dashboardCtrl);
dashboardCtrl.$inject = ['$scope', 'ngAnimate'];
function dashboardCtrl($scope, ngAnimate) {
$scope.functionOne = function () {
// your action
};
$scope.functionTwo = function () {
// your action
};
}
}());