cant get angular-animate to work

https://stackoverflow.com/questions/23209422

07-07-2023
|

Question

I am trying to get the basic example animation from angular site working. I copy paste the code but it doesnt work.

I downloaded the angular-animate.js (the same version as my angular.js file 1.2.15) i link it to my code. I made a animations.css file and linked it to my code (It works since styles are applied when i click on the checkbox just there is no animation)

Than i copy paste the code from the website

Here is my code index.html:

    <!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
  <link rel="stylesheet" href="css/animations.css"/>
</head>
<body>
  <ul class="menu">
    <li><a href="#/login">login</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <div ng-view></div>
    <!--
  <div>Angular seed app: v<span app-version></span></div>
    -->
  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="../bower_components/angular/angular.js"></script>
  <script src="../bower_components/angular/angular-animate.js"></script>
  <script src="../bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

    <link rel="stylesheet" href="css/login.css"/>

<div id="loginBox">
    <input ng-model="primaryInput" placeholder="Username" type="text" />
    <input ng-model="password"  placeholder="Password" type="password" />
    <input ng-model="email" placeholder="Email" class="check-element animate-show" ng-show="checked" type="text" />
    <input ng-model="checked" type="checkbox" /> <span ng-click="checked=!checked" class="checkboxLabel"> Create New Account</span>
    <input ng-click="login(primaryInput, password, email)" type="button" value="Login"/>
</div>





    <div ng-init="checked=true">
    <label>
    <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
    </label>
    <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
    Visible...
    </div>
    </div>

animations.css: (same as on the website)

/*css animations for angularjs*/





    .sample-show-hide {
    padding:10px;
    border:1px solid black;
    background:white;
    }

    .sample-show-hide.ng-hide-add, .sample-show-hide.ng-hide-remove {
    -webkit-transition:all linear 0.5s;
    -moz-transition:all linear 0.5s;
    -o-transition:all linear 0.5s;
    transition:all linear 0.5s;
    display:block!important;
    }

    .sample-show-hide.ng-hide-add.ng-hide-add-active,
    .sample-show-hide.ng-hide-remove {
    opacity:0;
    }

    .sample-show-hide.ng-hide-add,
    .sample-show-hide.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
    }

#loginBox {
    position:relative;
    clear:both;
    display:table;
    margin:0 auto;
    padding:10px;
    padding-top:0px;
    border:solid 1px grey;
    -moz-border-radius: 4px; /*for older mozila browsers*/
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07) inset, 0 0 20px rgba(33, 93, 253, 0.5);
}

input[type="password"], 
input[type="text"]{ 
    height:15px;
    margin-top: 12px;
}

input[type=checkbox]
{
border-radius:4px;
}


.checkboxLabel{ 
    float:left;
    font-size:11px;
    margin-top:3px;
    cursor:pointer;
}
.checkboxLabel:hover {
    text-shadow: rgb(46,163,207) 1px 0px 5px;
}
/*TODO animate placeholder so it starts out as black fades out to gray, than possibly fades while start typing*/
input{      /*TODO possibly place in its own class*/
    position:relative;
    float:left;
    clear:left;
    /*common for all inputs*/
    font-family: "Times New Roman", Times, serif;
    border: 1px solid #CCC;
    -moz-border-radius: 2px; /*for older mozila browsers*/
    border-radius: 2px;
    background:white; /*For: chrome*/
}
input:hover{
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07) inset, 0 0 3px rgba(33, 93, 253, 0.6);
}


input:active {
    border: 1px solid #57B5D5;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07) inset, 0 0 7px rgba(33, 50, 253, 0.6);
}

input:focus {
    border: 1px solid #A5BDFE;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07) inset, 0 0 15px rgba(33, 93, 253, 0.6);
}

[type=button]:hover{
cursor:pointer;
}

[type="button"]::-moz-focus-inner {
  border: 0;
}

input { outline: none; } //chrome safari

app.js:

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'LoginCtrl'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/login'});
}]);

Solution

When creating your angular app/module you will need to inject in ngAnimate

angular.module('myApp', [
  'ngRoute',
  'ngAnimate', // <-- this is the new line
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
])

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow