Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Animations firing on page load when element within directive template #8275

Closed
sheltonial opened this issue Jul 21, 2014 · 6 comments
Closed

Animations firing on page load when element within directive template #8275

sheltonial opened this issue Jul 21, 2014 · 6 comments
Assignees
@matsko
Labels
component: ngAnimate type: bug
Milestone
1.3.0-rc.0

Comments

@sheltonial
Copy link

Animations seem to fire on page load when within a directive template. This does not occur when the animation resides on the app's initial html page.

I have also tested this in angular 1.3.0-beta.16 with the same result.

Simple plunker example: http://plnkr.co/edit/uAzcDhHPfAbiIj72L5zx?p=preview
@Narretz
Copy link
Contributor

Narretz commented Jul 21, 2014

This seems to be the same problem as described in #5262 with ngShow, see example in #5262 (comment)

@Narretz Narretz added this to the Backlog milestone Jul 21, 2014
@matsko
Copy link
Contributor

matsko commented Aug 1, 2014

@sheltonial use ng-animate-children at the top of the <body> tag:

http://plnkr.co/edit/7ZYR0iGyUbGxk5FeS9z1?p=preview

You can also add a boolean to it if you want to disable animations until later on.

@matsko
Copy link
Contributor

matsko commented Aug 1, 2014

There seems to be a bug with ng-animate-children for disabling animations. Once that is fixed then that can be used as the solution for properly disabling animations until the app is ready.

@matsko matsko modified the milestones: Backlog, 1.3.0-beta.18 Aug 1, 2014
@matsko matsko self-assigned this Aug 1, 2014
matsko added a commit to matsko/angular.js that referenced this issue Aug 8, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
1d471e9 
…boostrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
@matsko matsko mentioned this issue Aug 8, 2014
Closed
matsko added a commit to matsko/angular.js that referenced this issue Aug 8, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
29fcdff 
…bootstrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
matsko added a commit to matsko/angular.js that referenced this issue Aug 8, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
17d82de 
…bootstrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
matsko added a commit to matsko/angular.js that referenced this issue Aug 8, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
9c758f8 
…bootstrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
@matsko
Copy link
Contributor

matsko commented Aug 11, 2014

Got a working fix:
http://plnkr.co/edit/7ZYR0iGyUbGxk5FeS9z1?p=preview

Hopefully this can go into master this week.

@sheltonial
Copy link
Author

I'm glad a bug was able to be resolved out of this, though I am looking for the opposite solution, where animations DO NOT fire on page load.

I can get this working if place the template within the directives javascript: http://plnkr.co/edit/DNQMSczDdI0CfVX2YU35?p=preview

The link to #5262 (comment) which @Narretz posted was very helpful for me.

@matsko
Copy link
Contributor

matsko commented Aug 12, 2014

Sorry, turns out that my link from before was incorrect. Here is the working fix:
http://plnkr.co/edit/ddfrVdxoz2jIxtUKgkdW?p=preview

It should go in later this week.

matsko added a commit to matsko/angular.js that referenced this issue Aug 12, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
393fc1b 
…bootstrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
matsko added a commit to matsko/angular.js that referenced this issue Aug 12, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
7cbb5f8 
…bootstrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
matsko added a commit to matsko/angular.js that referenced this issue Aug 12, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
f11a9b1 
…bootstrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
@btford btford removed the gh: issue label Aug 20, 2014
@btford btford modified the milestones: 1.3.0-beta.19, 1.3.0-beta.20 Aug 22, 2014
matsko added a commit to matsko/angular.js that referenced this issue Aug 28, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
2d8d282 
…bootstrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
matsko added a commit to matsko/angular.js that referenced this issue Aug 28, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
923804d 
…bootstrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
matsko added a commit to matsko/angular.js that referenced this issue Aug 28, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
3d2f571 
…bootstrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
matsko added a commit to matsko/angular.js that referenced this issue Aug 28, 2014
@matsko
fix($animate): ensure guarded animations consider AJAX requests upon …
71bb4f8 
…bootstrap

Prior to this fix when an Angular application is bootstrapped it would only
place an animation guard to prevent animations from running when the application
starts for the first two digest cycles. However, if any controllers or directives,
that are executed upon boostrap, trigger any remote code to be downloaded (via $http)
then the guard does not put that into consideration. This fix now properly addresses
that circumstance and removes the guard once all outbound HTTP requests are complete
when an Angular application is bootstrapped.

Closes angular#8275
Closes angular#5262
@matsko matsko closed this as completed in 4bca4c4 Aug 28, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@matsko matsko

Labels
component: ngAnimate type: bug
Projects
None yet
Milestone
1.3.0-rc.0
Development

Successfully merging a pull request may close this issue.

fix($animate): ensure guarded animations consider AJAX requests upon bootstrap matsko/angular.js
5 participants
@matsko @IgorMinar @btford @Narretz @sheltonial