CODEWITHSUNDEEP
cssangularjsng-animate
Marnus Steyn
Marnus Steyn

Reputation: 1083

Angular Animation for ng-repeat not working

I would like to do a simple fade in animation for the items that my ng-repeat generates, I followed all the instructions on the ngAnimate site but still no dice.

Here is my module

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

Here is the ng-repeat in my markup

<div class="col-md-6 col-xs-12" ng-repeat="mark in marks" ng-animate="'animate' ">
  <div class="col-md-12 well well-sm" >
    <div data-ng-include="'./Partials/mark.html'" />
  </div>
</div>

Here is some CSS for the animation

.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
}
.animate-enter.animate-enter-active {
    opacity: 1;
}

And here are the scripts I'm including

<!-- JS -->

<!-- Vendor Libs -->
<script src="./js/angular.min.js"></script>
<script src="./js/angular-animate.min.js"></script>
<script src="./js/angular-route.js"></script>
<script src="./js/jquery.min.js"></script>

<!-- UI Libs -->
<script src="./js/bootstrap.min.js"></script>

<!-- App libs -->
<script src="./js/app.js"></script>
<script src="./Controllers/MarksController.js"></script>
<script src="./Controllers/ViewMarkController.js"></script>
<script src="./Services/marksService.js"></script>

*) All the required CSS files are also linked in my header.

*) Link to Project: https://www.mediafire.com/?6h1qwcrblqczjpr

Upvotes: 3

Views: 1600

Answers (1)

Tjaart van der Walt
Tjaart van der Walt

Reputation: 5179

You don't need the ng-animate="'animate'" directive.

All you need to do is add a class to the intended item, and add the relevant angualrjs animate classes.

Please see the code below:

.animate-repeat {    
    -webkit-transition: 1s linear all;
    transition: 1s linear all;
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
    opacity:0;
    max-height:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
    opacity:1;
    max-height:40px;
}

The HTML:

<div ng-controller="RestaurantsController">
    <input type="text" ng-model="search_cat.name">
    <br>
    <b>Category:</b>
    <div ng-repeat="cat in cuisines">
        <b><input type="checkbox" ng-model="cat.checked" /> {{cat.name}}</b>
    </div>
    <hr />
    <div ng-repeat="w in filtered=(restaurants | filter:filterByCategory) " class="animate-repeat">
        {{w.name}}
    </div>
    <hr /> Number of results: {{filtered.length}}
</div>

Please see working example here

From the source

Animations

AngularJS provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service. These animation hooks are set in place to trigger animations during the life cycle of various directives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a JavaScript callback Animation (depending on if an animation is placed on the given directive). Animations can be placed using vanilla CSS by following the naming conventions set in place by AngularJS or with JavaScript code when it's defined as a factory.

Animations are not available unless you include the ngAnimate module as a dependency within your application.

Upvotes: 2

Related Questions