Angular javascript animation not working

Question

I've got an issue with an Angular JavaScript animation not working... Within the directive I'm calling:

$animate.addClass(element, 'test');

But for some reason the animation isn't registering that this has been added in its addClass handler. Something appears to be going within their framework because the ng-animate class isn't being added to the directive in DOM element in question, which I think may have something to do with it. Initially I thought it might be a timing thing, so I added a slightly ugly timeout as a belt and braces, but its still not working.

Please see the minimal test case here: http://plnkr.co/edit/MUUbiKureqatyoG9HKHQ

Any pointers would be much appreciated.

Answer 1

I'm not really sure about you wanna do, but if your desire is to animate your change view for your AngularJS application you can use the example used in ngRoute:

You can see all code the example and explanation in the source code of ngRoute.

Index.html

<example module="ngViewExample" deps="angular-route.js" animations="true">
  <file name="index.html">
    <div ng-controller="MainCntl as main">
      Choose:
      <a href="Book/Moby">Moby</a> |
      <a href="Book/Moby/ch/1">Moby: Ch1</a> |
      <a href="Book/Gatsby">Gatsby</a> |
      <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
      <a href="Book/Scarlet">Scarlet Letter</a><br/>

      <div class="view-animate-container">
        <div ng-view class="view-animate"></div>
      </div>
      <hr />

      <pre>$location.path() = {{main.$location.path()}}</pre>
      <pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre>
      <pre>$route.current.params = {{main.$route.current.params}}</pre>
      <pre>$route.current.scope.name = {{main.$route.current.scope.name}}</pre>
      <pre>$routeParams = {{main.$routeParams}}</pre>
    </div>
  </file>

Animation.css

<file name="animations.css">
    .view-animate-container {
      position:relative;
      height:100px!important;
      position:relative;
      background:white;
      border:1px solid black;
      height:40px;
      overflow:hidden;
    }

    .view-animate {
      padding:10px;
    }

    .view-animate.ng-enter, .view-animate.ng-leave {
      -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;

      display:block;
      width:100%;
      border-left:1px solid black;

      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      padding:10px;
    }

    .view-animate.ng-enter {
      left:100%;
    }
    .view-animate.ng-enter.ng-enter-active {
      left:0;
    }
    .view-animate.ng-leave.ng-leave-active {
      left:-100%;
    }
  </file>

Script.js

<file name="script.js">
    angular.module('ngViewExample', ['ngRoute', 'ngAnimate'],
      function($routeProvider, $locationProvider) {
        $routeProvider.when('/Book/:bookId', {
          templateUrl: 'book.html',
          controller: BookCntl,
          controllerAs: 'book'
        });
        $routeProvider.when('/Book/:bookId/ch/:chapterId', {
          templateUrl: 'chapter.html',
          controller: ChapterCntl,
          controllerAs: 'chapter'
        });

        // configure html5 to get links working on jsfiddle
        $locationProvider.html5Mode(true);
    });

    function MainCntl($route, $routeParams, $location) {
      this.$route = $route;
      this.$location = $location;
      this.$routeParams = $routeParams;
    }

    function BookCntl($routeParams) {
      this.name = "BookCntl";
      this.params = $routeParams;
    }

    function ChapterCntl($routeParams) {
      this.name = "ChapterCntl";
      this.params = $routeParams;
    }
  </file>

This code This code will allow you to fully animate the transition of your views.

More resources from stackoverflow: AngularJS - Animate ng-view transitions