Animation module loading too late?

Christopher L

unread,

Aug 1, 2014, 12:28:22 PM8/1/14

to ang...@googlegroups.com

Hello,

I'm working on an Angular app and trying to add animations. At the moment, everything almost works - the CSS classes are added and removed properly. However, there are no transitions because the element in question is being hidden right when the transition should happen.

Here's some basic code:

require(["jquery", 'angular', 'angular-route', 'angular-animate'], function($) {
  $(function() {
    angular.module('sampleApp', ['ngRoute', 'ngAnimate']).config(function($routeProvider) {
      //...
    }).
    controller('SampleCtrl', function($scope, $filter) {
      //...
    });

    angular.bootstrap(document, ['ngAnimate', 'sampleApp']);
  });
});

I pasted in a sample from a tutorial into my HTML:

<div ng-init="checked=true">
  <label>
    <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
  </label>
  <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
    Visible...
  </div>
</div>

Everything about this view updates correctly - the div hides and shows. However, I saw that the problem is that there is a bit of autogenerated CSS in the <head>:

@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}

Which is different in the original tutorial:

@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-animate){display:none !important;}ng\:form{display:block;}

I can cook up a working sample, but I was wondering if anyone could diagnose this right off the bat. I suspect ngAnimate is being loaded too late?

Christopher L

unread,

Aug 7, 2014, 12:04:35 PM8/7/14

to ang...@googlegroups.com

After some further investigation, I've determined that ng-animate may not be loading properly - .ng-animate-block-transitions shows up in the autogenerated stylesheet regardless of whether or not the animation module is reloaded, so it's not proof that ng-animate is loaded. If I go by step 12 of the standard tutorial, I get this autogenerated CSS in <head>:

@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}.ng-hide-add-active,.ng-hide-remove{display:block!important;}

Which has a different, but still crucial way of making sure the animation is visible (ng-hide-add-active). I'm still stumped but when I get some time I'll investigate further.

Christopher L

unread,

Aug 15, 2014, 12:00:41 PM8/15/14

to ang...@googlegroups.com

Argh. So I can tell that ng-animate is loading, because the animation CSS classes are being added and removed correctly when I have it and aren't when I don't.

The only other possibility I can think of is that ng-animate might be loaded too late since I'm waiting for $(document).ready(), and thus the header CSS doesn't include the bits that make ngAnimate work with ngShow. That doesn't make complete sense to me as an explanation, but it's the best I can do short of tracing down the behavior in source.

In the meantime, I hacked around the animation issues by overriding the CSS directives Angular inserted:

.actually-animate-this.ng-hide {
 opacity: 0;
 /*override*/
 display: block !important;
}

Reply all

Reply to author

Forward