Search code examples
angularjsangular-uing-animate

ng-animate on an ng-if does an "enter" but not a "leave" when stateparams change

In one of my partials, I do this:

<!-- Lesson Details -->
<div class="panel" id="change_subject" ng-if="$state.includes('dashboard.create.lessons')" ng-animate="{enter: 'basic-animation-enter', leave: 'basic-animation-leave'}">
  <div class="panel_header">
    <div class="panel_title">
      <h5>
        Lesson Details
      </h5>
    </div>
  </div>
</div>

The $state.includes is straight out of the angular-ui router example. I am using angular ui, of course.

Here is my appState function:

state('dashboard.create.lessons.detail', {
        // parent: 'lessons',
        url: '/{lessonId}',
        views: {
          '[email protected]': {
            templateUrl: "/app/partials/create.detail.html",
            controller: ['$scope', '$stateParams', 'curriculumHash', function(scope, stateParams, curriculumHash){
              curriculumHash.sstHash().then(function() {
                scope.selectedContent = findInList(scope.sstArray, stateParams.lessonId);
                scope.original = angular.copy(scope.selectedContent);
               });
            }],
          }
        }
      })

Pretty ordinary.

When the partial is reloaded for each new stateParam, the ng-if creates a new DOM element (with a new Hash $$). And every time it calls the "enter" animation no problem. But the DOM element getting destroyed is not calling the "leave".

If I'm not doing anything wrong, then I should be asking for just a better way of doing this - that is, how to animate a view on reload with new parameters...

Thanks!

========== UPDATE ========== Here is a JSFiddle. Doesn't borrow a lot from the code above, but makes the point I'm pretty sure. http://jsfiddle.net/morgs32/xPxkX/1

Solution

  • You are using the 1.1.5 version with the 1.1.4 classes names.

    Look this documentation: NgAnimate 1.1.5

    At this site, has a lot of examples: Ng-Animate Slider Effect

    The new Fiddle working using css: http://jsfiddle.net/fzKVN/1/