CODEWITHSUNDEEP
javascriptcssangularjsanimationcss-animations
StepUp
StepUp

Reputation: 38199

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?

Upvotes: 0

Views: 348

Answers (2)

Endre Simo
Endre Simo

Reputation: 11541

Check if scripts/angular-animate.js is loaded. You can verify this by inspecting the file existence in the source or the network panel in every browser.

From what you described angular-animate.js file is not included into the document, that's why the ngAnimate directive is not working.

Upvotes: 1

kernal_lora
kernal_lora

Reputation: 1155

I think you missed ng-app. Place ng-app="app" on BODY or HTML as attribute. and place the ng-animate on the div like this.

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

CSS:

.slide-animation {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 560px;
}
.slide-animation.ng-enter  .ng-enter-active, .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;
}

Then I think it will be works

Upvotes: 1

Related Questions