Animate crash: Cannot read property 'runner' of undefined in 1.4.0

[robertftw]

TypeError: Cannot read property 'runner' of undefined
    at angular-animate.js:2330
    at forEach (angular.js:336)
    at closeChildAnimations (angular-animate.js:2325)
    at queueAnimation (angular-animate.js:2148)
    at Object.$$AnimateQueueProvider.$get.push (angular-animate.js:2040)
    at Object.$AnimateProvider.$get.leave (angular.js:5200)
    at cleanupLastView (angular-route.js:913)
    at angular-route.js:942
    at publicLinkFn (angular.js:7387)
    at $get.boundTranscludeFn (angular.js:7533)`

I get it when using it with the following CSS:

.hide-fade.ng-hide-add, .hide-fade.ng-hide-remove {
  -webkit-transition:all linear 0.3s;
  -moz-transition:all linear 0.3s;
  -o-transition:all linear 0.3s;
  transition:all linear 0.3s;
  display:block!important;
}
.hide-fade.ng-hide-add.ng-hide-add-active,
.hide-fade.ng-hide-remove {
  opacity:0;
}
.hide-fade.ng-hide-add,
.hide-fade.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

Does not happen while using 1.3.15

[Narretz]

Can you please provide a reproduction in a plunker or similar?

[robertftw]

I'll try, but might be difficult due to I found it in a large enterprise app when I updated to 1.4.0 so I had to revert back to 1.3.15 again.

[mafrost]

I have the same issue in my large app when upgrading to 1.4.0, using ui-router if that could matter.

[parliament718]

Yup I get the same issue. Just upgraded to 1.4 recently. I can barely reproduce it in my own app (happens only sometimes for the same test case), but here's my setup:

.page-animate {
  position: absolute;
  background: #fafafa;
  @include transition(padding-top 0.3s ease-in-out, left 0.3s ease-in-out);

  &.ng-leave {
    display: none;
  }
  &.ng-enter {
    left: 100%;
  }

  &.ng-enter.ng-enter-active {
    left: 0;
  }
}

<div ng-view class="page-animate"></div>

[Kerumen]

I'm experiencing the same issue with UI-Router, Angular Material and Flexslider included in my app.
It's only appearing when Flexslider is loaded on a page so it could be related to Flexslider. Do you guys have Flexslider in your app?

EDIT: Fixed it by desactivate ngAnimate on the Flexslider ($animate.enabled(false, el);)

[Narretz]

Is this still an issue with the latest 1.4.6?

[robertftw]

@Narretz Seems to be fixed now!

[Narretz]

@robertftw Great, I'll close this then!

[Emnalyeriar]

Sorry but this doesn't seem to be fixed. It just occured in my project.
Tried different angular and angular animate versions but the bug occurs in all versions combinations I tested.
The problem is I have a translate animation on ui-view just like here and inside ui-view I have html section elements that have their own translate and transition css rules. When I turn off one or another it works fine but when both css animations are declared I get this error:

TypeError: Cannot read property 'runner' of undefined
at angular-animate.js:2330
at forEach (angular.js:336)
at closeChildAnimations (angular-animate.js:2325)
at queueAnimation (angular-animate.js:2148)
at Object.and.$get.data.push (angular-animate.js:2040)
at Object.$provide.$get.afterElement.leave (angular.js:5200)
at Object.scope.leave (angular-ui-router.js:3890)
at cleanupLastView (angular-ui-router.js:3941)
at angular-ui-router.js:3969
at publicLinkFn (angular.js:7387)

Tested on 1.4 and 1.4.6, ui router 0.2.15.