StepUp StepUp - 3 months ago 35
AngularJS Question

How to get worked Animation.css in Angular 1.5.8?

I've added a dependency

ngAnimate
to AngularJS:

var app=angular.module('testApp',['ngRoute', 'ngAnimate']);


and I've added the animations classes to
animation.css
:

.slide-animation.ng-enter, .slide-animation.ng-leave {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
position:relative;
height: 1000px;
}


and included this CSS file in the head:

<head>
<link href="app/styles/animations.css" rel="stylesheet" type="text/css"/>
</head>


Then I've used this class in my
index.html
file:

<!doctype html>
<html ng-app="testApp">
<head>
<title>Foo App</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet" type="text/css"/>
<link href="app/styles/animations.css" rel="stylesheet" type="text/css"/>
</head>
<body >

<div ng-view="" class="slide-animation"></div>

<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/employeeController.js"> </script>
<script src="app/controllers/depController.js"></script>
<script src="app/services/employeeFactory.js"/></script>
</body>




However, there is no slide animation.

I've seen this tutorial and my actions are the same to get used animations from the
animation.css
file.

Please, does anybody know what I've missed?

Answer

Check if scripts/angular-animate.js is loaded. You can inspect the source or the network panel in every browser. From what you described angular-animate.js file is not loaded, that's why the ngAnimate directive is not working.