Weird behavior of $animateCss with ng-if and quick toggling of elements in 1.4.0rc1

[Rush]

Angular version 1.4.0rc1

I wrote a custom javascript animation and applied it to ng-if:

mod.animation('.slide-margin', function($animateCss) {
    var animation = {
      enter : function(element, done) {
        var height = element[0].offsetHeight;
        var animator = $animateCss(element, {
          from: {
            marginTop: '-' + height + 'px'
          },
          to: {
            marginTop: '0px'
          },
          duration: 0.5
        });
        animator.start().finally(done);
      },
      leave : function(element, done) {
        var height = element[0].offsetHeight;
        var animator = $animateCss(element, {
          from: {
          },
          to: {
            marginTop: '-' + height + 'px'
          },
          duration: 0.3
        });
        animator.start().finally(done);
      },
      move : function(element, done) {
      },
      addClass : function(element, className, done) {
      },
      removeClass : function(element, className, done) {
      }
    };
    return animation;
  });

a(ng-click='show=!show') CLICK
br
br
div.slide-margin(ng-if='show')
  p A
  p B
  p C

Simple behavior is correct when you toggle an item, it slides down and if you click again in the middle of the animation it slides back from the same position. But if you click yet again for it mid-animation to slide down ng-if creates a new DOM content and weirdly enough old DOM content starts animating down along with the new content. Is this expected behavior? Do you know of a workaround?

[Rush]

JSFiddle showing the problem http://jsfiddle.net/z8gtkpzd/ - spam-click on the CLICK

[Narretz]

Did this work in 1.3.x?

[Rush]

There is no $animateCss in 1.3.x so as such this exact thing cannot be done in 1.3.x.

[matsko]

This was definitely a bug. Thank you for finding it. This PR will fix the issue:

#11805

Also note that there is another PR which makes using $animateCss much easier:

matsko@290fb4d