ngAnimate doesn't trigger enter method on first page load #10536

eeglbalazs · 2014-12-20T15:14:31Z

After upgrading to v1.3.8 ngAnimate doesn't trigger enter method on first page load.
I'm using Javascript based animations with the standard Angular Router.

Like:

ngModule.animation('.an-reveal', function () {
    return {
      enter: function(element, done) {
        element.velocity('fadeIn', { delay: 300, duration: 600, complete: done })
        return function() {
          element.stop()
        }
      },
      leave: function(element, done) {
        element.velocity('fadeOut', { duration: 300, complete: done })
        return function() {
          element.stop()
        }
      }
    }
  })

and I have <main ng-view class="an-reveal"></main>

The text was updated successfully, but these errors were encountered:

grabbou · 2014-12-21T09:29:30Z

Actually, it is a normal Angular approach that has been introduced a while ago. You can read more about the details here -> #5130. There's a quick 'dirty-hack' mentioned in the last comment there showing how to make that working again. I've recently needed to enable that in order to present enter animation of the whole app to the users.

Note: Remember that this is still dirty hack that may stop working in the future or create additional bugs so comment that line really nicely in your app and always check when upgrading to a newer Angular version.

petebacondarwin · 2014-12-22T01:05:54Z

@matsko - should we make this easier to achieve?

@eegl - an alternative less hacky approach is to initialize the things that you want to be animated on start up via a $timeout. See http://plnkr.co/edit/2kRgrYYcJvtbXwNXn9n2?p=preview

eeglbalazs · 2014-12-22T09:30:13Z

@grabbou , @petebacondarwin thank you both for your suggestions and explaining what's going on!

I've ended up with the following code, which - I believe - is hacky too, but I've only needed to add one line, without changing anything else (basically manually triggering the same animation as I have on 'enter'):

ngModule.animation('.an-reveal', function () {
   angular.element('.an-reveal').velocity('fadeIn', { delay: 300, duration: 600})
    return {
      enter: function(element, done) {
        element.velocity('fadeIn', { delay: 300, duration: 600, complete: done })
        return function() {
          element.stop()
        }
      },
      leave: function(element, done) {
        element.velocity('fadeOut', { duration: 300, complete: done })
        return function() {
          element.stop()
        }
      }
    }
  })

grabbou · 2014-12-22T18:27:43Z

@petebacondarwin @MatasKo Maybe additional argument when declaring animations with ngAnimate, like "animateOnStartup: {Boolean} | false" by default ?

matsko · 2014-12-22T19:22:19Z

@eegl @grabbou if you place the following attribute on the body element then animations on load should work.

<body ng-animate-children="exp">

And set exp=true once the application loads then it should work.

lgalfaso · 2015-01-02T11:42:34Z

from the comments, it is my understanding that there is nothing else to be done for this issue. If there is something else that needs attention, feel free to reopen the issue

glebmachine · 2016-12-23T11:47:48Z

year passed...
This is still a problem, does anybody have any news?

gkalpak · 2016-12-23T14:37:36Z

@glebmachine, what news do you expect? Based on the comments, the conclusion was that this is working as expected, there is a way to change the default behavior if you wish and there is nothing more to do.

If you are having issues with latest versions, please open a new issue describing the problem (and please reference this issue for context).

hejiaji · 2017-02-21T14:44:26Z

@glebmachine The best way for now is using setTimeout as a workround

glebmachine · 2017-02-21T19:06:18Z

Yeah, looks fair. I hoped that there is any option to trigger animation on element appear, but it's triggered only on change by design(

oemueller · 2017-09-25T14:25:01Z

Using this snippet animations are also played on page load:
myModule.run(function($animate) { $animate.enabled(true); });
Source

petebacondarwin modified the milestones: 1.3.9, 1.4.x Dec 22, 2014

petebacondarwin added branch: 1.4.x component: ngAnimate frequency: moderate needs: investigation severity: inconvenient type: bug labels Dec 22, 2014

petebacondarwin assigned matsko Dec 22, 2014

lgalfaso closed this as completed Jan 2, 2015

gogachinchaladze mentioned this issue Jan 10, 2017

ngView animation enter is not firing on page load. #15589

Closed

rhclayto mentioned this issue Aug 6, 2017

Animation not working on load/reload homerjam/angular-ui-router-anim-in-out#18

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ngAnimate doesn't trigger enter method on first page load #10536

ngAnimate doesn't trigger enter method on first page load #10536

eeglbalazs commented Dec 20, 2014

grabbou commented Dec 21, 2014

petebacondarwin commented Dec 22, 2014

eeglbalazs commented Dec 22, 2014

grabbou commented Dec 22, 2014

matsko commented Dec 22, 2014

lgalfaso commented Jan 2, 2015

glebmachine commented Dec 23, 2016

gkalpak commented Dec 23, 2016

hejiaji commented Feb 21, 2017

glebmachine commented Feb 21, 2017 via email

oemueller commented Sep 25, 2017 •

edited

Loading

ngAnimate doesn't trigger enter method on first page load #10536

ngAnimate doesn't trigger enter method on first page load #10536

Comments

eeglbalazs commented Dec 20, 2014

grabbou commented Dec 21, 2014

petebacondarwin commented Dec 22, 2014

eeglbalazs commented Dec 22, 2014

grabbou commented Dec 22, 2014

matsko commented Dec 22, 2014

lgalfaso commented Jan 2, 2015

glebmachine commented Dec 23, 2016

gkalpak commented Dec 23, 2016

hejiaji commented Feb 21, 2017

glebmachine commented Feb 21, 2017 via email

oemueller commented Sep 25, 2017 • edited Loading

oemueller commented Sep 25, 2017 •

edited

Loading