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;
}
On Thursday, August 7, 2014 12:04:35 PM UTC-4, Christopher L wrote:
>
> 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 <https://docs.angularjs.org/tutorial/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.
>
> On Friday, August 1, 2014 12:28:22 PM UTC-4, Christopher L wrote:
>>
>> 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
>> <https://docs.angularjs.org/guide/animations> 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?
>>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
