search

angular / angular.js

AngularJS - HTML enhanced for web apps!
https://angularjs.org
MIT License
58.8k stars 27.48k forks source link

Animations not working with 1.4.x releases, ok with 1.3 #12267

Closed zakhenry closed 9 years ago

zakhenry commented 9 years ago

I'm building a single page application with angular material and for some reason the animations are not functioning.

It looks like it is not just angular material as I can't get the basic example on the https://docs.angularjs.org/guide/animations page to work.

It appears that the classes that angular material relies on to be added for the css animations to hook on to are not being applied. Inspecting the elements in chrome I just see the hide and show classes but none of the transition classes.

Relevant parts of my bower file:

    "angular": "~1.4.1",
    "angular-animate": "~1.4.1",
    "angular-sanitize": "~1.4.1",
    "angular-messages": "~1.4.1",
    "angular-i18n": "~1.4.1",
    "angular-ui-router": "~0.2.15",
    "angular-material": "~0.10.0",

My site (in development) is at http://www.zakhenry.com and the animation test page is at http://www.zakhenry.com/#/blog When the viewport is small (ie mobile width) I should be able to see the sidepane animate out like on the https://material.angularjs.org/latest/ site; instead it just appears and disappears.

Source code is at https://github.com/xiphiaz/zakhenry.com

update I can actually access the nganimate api eg if I run $animate.leave(); in a controller I get an error thrown from angular-animate, indicating the module is loaded successfully. Also adding breakpoints in the ng animate vendor works.

If I call console.log($animate.enabled()) in the run() phase I get false in the console. I tried setting it to true with $animate.enabled(true), to no effect.

zakhenry commented 9 years ago

Angular 1.4.7 seems to have fixed my original issue - angular animate is now working again.

Also, to confirm setup with others, I'm using angular material and ui router, with the ng-app on the <html> and the ui-view on the <body>

<!DOCTYPE html>
<html ng-app="app" ng-strict-di>
    <head>
        <title>{{AppController.pageTitle}}</title>
        <base href="/" />

    </head>

    <body ui-view="app" layout="column" layout-fill></body>

</html>
IDontEatSoap commented 9 years ago

ngAnimate works here (1.3.8): https://gist.githubusercontent.com/bennadel/89c1659b1ce489e248a6/raw/0192d1479b95b5007af02d308dc62ffe619412da/pre-bootstrap-screen.htm - http://bennadel.github.io/JavaScript-Demos/demos/pre-bootstrap-loading-screen-angularjs/

But does not work here (1.4.7): http://codepen.io/IDontEatSoap/pen/JYBJwV

Ideas?

jherman commented 9 years ago

I'd like to add that I am also still seeing this issue. I had a hard time finding related google searches based on this issue, so instead I posted this issue on stackoverflow at the time:

http://stackoverflow.com/questions/33420664/angularjs-why-are-the-animation-classes-not-appended-during-ng-hide-show-transi

Just found this case issue today, and wanted to let you know I've tried the steps here, upgrading to

1.4.7 angular/angular-router 0.2.15 ui-router 0.11.4 angular material

My current ng-app is at <html> (I have a controller there too), and originally my ui-view was one child below <body>. Tried moving ui-view to <body>, but that didn't help. Any ideas?

jherman commented 9 years ago

I've added a codepen showing this:

http://codepen.io/anon/pen/OyoyYX?editors=101

If you are using chrome, look into the debugger browser. You can see the enter/etc classes are not being attached.

pauloinfotec commented 8 years ago

Hi, i am trying to use animation with angular 1.4.7 and angular-strap to animate my modals and alert messages. Someone can help me ?

SuneRadich commented 8 years ago

I too see issues with ngAnimate, both in Angular 1.4.7 and Angular 1.5.0.b2. I am using ui.router 0.2.15.

The weird part is, that animations work as expected when switching states in ui.router, but the animation classes are not added for ng-repeat directives in the views.

sDaniel commented 8 years ago

For me the cause for css classes not being applied seemed to have been an old version of angular-bootstrap (ui-bootstrap-tpls.js) which I updated from ~0.13.4 to ~0.14.3. (Angular 1.4.x)

rschoenbichler commented 8 years ago

same problem here, animation classes are only added to the view container

Narretz commented 8 years ago

@jherman Your ng-show / hide elements have no animation CSS associated with them, that's why the classes are never added.

Narretz commented 8 years ago

Hi, I'm going to lock this conversation for the following reasons: The original problem has been fixed. Any new post here is basically lost, as the issue is closed. It's also quite possible that you have different problems, so it's just confusing to have all of them in one issue. For anyone who still has problems with ngAnimate when switching to 1.4, please open a new issue with a minimal reproduction / demo, in plnkr.co or codepen. Thanks!