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.
