Angular JS Animation Not Working

Question

I'm trying to show/hide a details field in angular js. The details show and hide, but there is no animation for some reason.

<div class="directoryEntry" ng-repeat="listing in listings">
        <span class="category">{{listing.category}}</span>
                    ...
        <a ng-click="sElement = $index" href="javascript:void(0)">Member Details ></a>
        <div ng-show="$index == sElement" ng-animate="{show: 'details-show', hide: 'details-hide'}">{{listing.details}}</div>
    </div>

This is the CSS:

.details-show, .details-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}

.details-show.details-show-active,
.details-hide {
opacity:1;
}

.details-hide.details-hide-active,
.details-show {
opacity:0;
}

Answer 1

First make sure you include the ngAnimation module inside your application. You should add the correct script in your HTML and require it in your application module declaration like this:

angular.module('yourApp', ['ngAnimate']);

You should also use the .ng-hide-add and .ng-hide-remove for your animations. To get more information, you can consult this example in the AngularJS documentation: https://docs.angularjs.org/api/ng/directive/ngShow#usage_animations