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.
