CODEWITHSUNDEEP
javascriptcssangularjs
JensOlsen112
JensOlsen112

Reputation: 1299

AngularJS animations are not being shown

I'm trying to use animations in my angularjs app. However I cannot get it to work - angular is working but no animations are being shown.

Here's a plnkr with all my code: http://plnkr.co/edit/wHnztwWmOf95uGfQ0FBd?p=preview

If you prefer to view my code on stackoverflow then here it is:

index.html:

<!doctype html>
<html ng-app="app">

<head>
  <meta charset="utf-8">
  <title>Top Animation</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-animate.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-init="names=['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];">
    <div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;">
      <form class="form-search">
        <div class="input-append">
          <input type="text" ng-model="search" class="search-query" style="width: 80px">
          <button type="submit" class="btn">Search</button>
        </div>
        <ul class="nav nav-pills nav-stacked">
          <li ng-animate="'animate'" ng-repeat="name in names | filter:search">
            <a href="#"> {{name}} </a>
          </li>
        </ul>
      </form>
    </div>
  </div>
</body>
</html>

app.js:

(function () {
    'use strict';

    var app = angular.module('app', [
        // Angular modules 
        'ngAnimate',        // animations
    ]);
})();

style.css:

.animate-enter, 
.animate-leave
{ 
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  position: relative;
  display: block;
} 

.animate-enter.animate-enter-active, 
.animate-leave {
  opacity: 1;
  top: 0;
  height: 30px;
}

.animate-leave.animate-leave-active,
.animate-enter {
  opacity: 0;
  top: -50px;
  height: 0px;
}

Upvotes: 0

Views: 45

Answers (1)

Abhishek Jain
Abhishek Jain

Reputation: 2977

Animation in angular 1.3 has changed. Here is the updated plunker with animation working. More information here from where I have copied the animation. :-)

Documentattion on ng-repeat here.

<li class="animate-repeat" ng-repeat="name in names | filter:search">
        <a href="#"> {{name}} </a>
      </li>

Upvotes: 2

Related Questions