Animations with Angular 1.2.0rc1

[lanceschi]

Hi,

it seems animations don't work at all with the new release of Angular 1.2.0rc1. Most probably a fix is needed.

Great job btw.

Cheers,
Luca

[bcronje]

Yes it seems the ngAnimate API changed, see http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html for the rundown. Hopefully someone on the ui-router team will pick this up, as it should be a core functionality of any ui route implementation in my opinion.

[timkindberg]

Of course we will. As soon as its in a stable release.

[lanceschi]

Btw with Angular 1.2.0rc1 additional core modules now are to be specified:
angular.module("unnamedApp", ['ngRoute', 'ngAnimate' ...

Cheers,
Luca

[nateabele]

@timkindberg Maybe we can put this on a angular-1.2 branch or something.

[timkindberg]

Good idea

[rlrosa]

this is pretty nice http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#how-to-make-animations-in-angularjs

[nateabele]

Okay, I've created an angular-1.2 branch which contains a refactored uiView directive and updated tests. However, 3 tests are still failing for reasons I haven't been able to figure out.

If you're using Angular 1.2 for development, I would encourage you to check out and build from the branch, help test the changes, and help debug the failing tests. Thanks.

[bcronje]

Nate, first bug:

The second parameter to $animate.leave() is a callback, you currently have it set to element.

Should be changed to

remove: function(element) { $animate.leave(element.contents()); },

Doesn't do anything for the failing tests though.

[bcronje]

Nate, I played around with this branch over the weekend and found a few issues.
Then new enter(element, parent, after, done) animation method actually applies the animation classes to element and not parent, so with your current implementation you have to wrap your template code for the animations to work as intended which is not ideal.

I'll send a PR later today that might be a step in the right direction.

Question, is the ability to render the default content inside a ui-view that does not have a template a requirement? Or can any static content inside ui-view be discarded?

[nateabele]

Question, is the ability to render the default content inside a ui-view that does not have a template a requirement?

Yes. It should be present whenever there's nothing else to render.

[bcronje]

Nate, just send the PR. There are still 2 tests failing, but manually testing them produces the correct results, so not sure what's up with the unit tests. I also tested this in my own project and it seems to work fine.

Got inspiration from how ngView and angular-route-segment are handling the 1.2 animation changes.

Does this work for you?

[Rodeoclash]

I've also been playing around with this branch in conjunction with Angular 1.2 and it's been working great, looking forward to getting it merged in.

I have noticed that the $stateChangeStart event seems to fire multiple times. I haven't dug into this too much and it might be something else stupid that I'm doing, so I'll report back anything here. Just wanted to say the branch works great from POV.

[ubenzer]

@Rodeoclash it may be related to this issue i think: #350 Check it out. :)

[arush]

Thanks for working on this guys, will test it on our dev too

[Rodeoclash]

@ubenzer hey, it was the most basic of mistakes on my end, assignment instead of conditional checking that was causing it. You might want to remove the possible link between them as I don't think their is one.

Otherwise zero problems with this branch, been working a treat.

[devuo]

I have also been using this branch, and so far, no problems at all.

[arush]

Hey guys, unfortunately I have found a bug when dynamically assigning the class with a scope variable (e.g. ng-class="this.variable") - one of the main reasons for the animations rewrite was to enable flexible class based animations like this.

Can't tell what is causing it, but I have successfully been able to reproduce it on multiple different apps.

Expected results (working with ng-view)

<div ng-view class="firstAnimationClass ng-leave" ng-class="this.variable">
<div ng-view class="firstAnimationClass ng-enter" ng-class="this.variable">
or
<div ng-view class="secondAnimationClass ng-leave" ng-class="this.variable">
<div ng-view class="secondAnimationClass ng-enter" ng-class="this.variable">

(firstAnimationClass/secondAnimationClass is assigned by ng-class="this.variable")

No matter how the dynamic class changes, both the entering and leaving view will have the same animation class

Actual results (using ui-view)

<div ui-view class="firstAnimationClass ng-leave" ng-class="this.variable">
<div ui-view class="secondAnimationClass ng-enter" ng-class="this.variable">

as soon as ng-class changes, the animation classes are out of sync and never get back in sync

This situation should NEVER arise.

---

Code to reproduce

I have put together 2 fiddles that are identical, except the first uses angular 1.2 ng-view, and the second uses ui-router/angular-1.2

ng-view: http://jsfiddle.net/qZq8T/
ui-view: http://jsfiddle.net/qZq8T/1/

These should behave identically, it is the same code. But you will quickly see how animation classes get out of sync.

[nateabele]

@arush Awesome, thanks for putting this together. I'm actually heading to a conference right now, but I'll try and poke at it this weekend.

[michalmikolajczyk]

@arush, I have been trying to get animations to work with ui-view and angular-ui-router and couldn't, until I tried the code from your fiddle (lines 1-1494).
angular-ui-router.js is the same in branches: master and angular-1.2.

anyway, with your version, it works. Is the code going to be pulled into one of the branches?

[arush]

Michal you have to grunt build from the angular-1.2 branch to generate the code in my fiddle.

​

Problem is there is still a bug with that code as I have described

—
Sent from Mailbox for iPhone

On Sun, Oct 13, 2013 at 8:55 AM, Michał Mikołajczyk
notifications@github.com wrote:

@arush, I have been trying to get animations to work with ui-view and angular-ui-router and couldn't, until I tried the code from your fiddle (lines 1-1494).
angular-ui-router.js is the same in branches: master and angular-1.2.

anyway, with your version, it works. Is the code going to be pulled into one of the branches?

Reply to this email directly or view it on GitHub:
#320 (comment)

[michalmikolajczyk]

never used grunt-build, I am using Yeoman with Grunt and Bower, all AngularJS source files I get from Bower.

Today I installed ui-router by including this in the bower.json file:
"angular-ui-router": "https://github.com/angular-ui/ui-router.git#angular-1.2"

and that worked fine, the repo was installed correctly, but it seems that https://github.com/angular-ui/ui-router/blob/angular-1.2/release/angular-ui-router.js is the same as https://github.com/angular-ui/ui-router/blob/master/release/angular-ui-router.js

Anyway, I think I will skip ui-router for now. i need multiple views and I need control over which views get reloaded on state change. Ui-router only allows that with nested views. From what I found out and tried, changing state with multiple-views will cause reload to sibling (same level) views. In my app, I have two completely separate views and when I change state in one of them, I need to preserve the other one. I dont really care if I go from:
myapp/#!/blog to myapp/#!/app or
myapp/#!/blog to myapp/#!/blog?app=search_route
I know I can preserve state data in a service, but I really need to preserve the views (like when a user scrolled down, I dont want the view to reload and start from top again, or cause page flicker).

I know about #125 but that hasn't been resolved yet.

So... I started typing and in the meantime i found out about 'Sticky Views' in the Angular-routing project https://github.com/dotJEM/angular-routing/wiki/State-provider---views#sticky-views
That seems to be exactly what I need. I am only worried that the project seems a bit young, not sure if it's ready for production.

Any advice? :)

[zurie]

@wiherek5 what you need to do is download the angular ui-router 1.2 angular branch.. seperately. then cd to that directory and do a NPM install and a bower install and a grunt build. (or i think grunt server) and that will actually build you a angular ui-router based on the branch. you can tell you are using the right one because when you open up the normal .js in the header you will see * @Version v0.2.0 if you open up your BUILT ui-router from the branch you will see this instead. * @Version v0.2.0-dev-2013-10-05 make sure your version has a dev writtin in the header otherwise you aren't using the new code.

[dlukez]

@arush I think I'm encountering a similar issue where other directives on my ui-view aren't updating (e.g. ng-class).

In the case of ng-class, when I inspect the call to $animate.addClass as a part of the ngClass change, it tells me that the target element doesn't have a parent so I assume it's linked to some other clone or template element (unsure) that isn't injected into the DOM.

I messed with the view directive code and managed to get the animations working for me, but broke like 8 tests at the same time. I'm still learning the ui-router stuff, so I only have a basic understanding of what's going on. I basically mimicked what's been done in the Angular 1.2 RC3 ng-view directive (not sure how much that has changed in the last few versions).

Your jsfiddle with my code:
http://jsfiddle.net/dlukez/7RwNK/1/

Perhaps someone with a greater understanding can explain why those changes fix the animations and if necessary, factor in the appropriate changes.

My commit: dlukez/ui-router@652d2c3f0fc9b0090db1d5b8adcf21013d4a73f9

May try to have a look into why the tests break - any guidance would be welcome!

EDIT: The above commit was causing an error. This one is more up to date: dlukez/ui-router@a09ee6f39f04a9d5d3e3f66ea8ee1a715a445940

[bnguyen82]

Awesome! I apply the new branch
"angular-ui-router": "https://github.com/angular-ui/ui-router.git#angular-1.2"
and my animation works again with angular 1.2-rc.3. However, I don't see $stateChangeStart firing multiple times as @Rodeoclash mentioned.

Thanks very much.

[perqa]

@bnguyen82, are you using the new (1.2), or older, syntax for your animations to work?
Ref: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

[ninjatronic]

Hi guys,

Is there a plunker/fiddle to demonstrate how to use ngAnimate with ui-view on angular 1.2.x? I'm also trying to get this working but not having any luck. I'm using the css from @renz45's comment, my ui-view looks like:

        <div ui-view id="topElement" class="slide-left">
        </div>

and I have declared ngAnimate as a dependency for the angular app.

Thanks

[lanceschi]

@ninjatronic your HTML is correct. I'm using ui-router v1.2 branch flawlessly with angular 1.2.3.
Check if ./libs/angular/1.2.x/angular-animate.min.js is correctly included in your webapp.

Please have a try with this simplier css and let me know. Eventually hit F12 on Chrome and read console msgs.

<style>
.ngPartialSlideReveal.ng-enter {
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  transition: 0.5s linear all;
  opacity: 0.5;
  position: relative;
  opacity: 0;
  top: 10px;
}

.ngPartialSlideReveal.ng-enter-active {
  top: 0;
  opacity: 1;
}
</style>

The below HTML markup should suffice!

<div ui-view class="ngPartialSlideReveal"></div>

Cheers,
Luca

[ninjatronic]

Hi @lanceschi

I was using the release build of ui-router - I switched to the version here and it works.

Any idea when this will be released?

Cheers

[lanceschi]

@ninjatronic no, sorry. I'm not part of the ui-router team. I'm using this one:

https://github.com/angular-ui/ui-router/tree/angular-1.2

[ghost]

Hello,

Anyone can tell me the plans to support Angular 1.2.7?

Thanks

[kennethlynne]

In my opinion this is high priority.

Until the official release is out, this pastebin solved it for me: http://pastebin.com/raw.php?i=hfSpURL8

Source: http://stackoverflow.com/questions/19514445/how-can-i-use-ng-animate-with-ui-view-rather-than-ng-view

[gustavohenke]

+1, I'm also needing a update about this one.

[dlukez]

This looks to be fixed in the latest master, although I don't think other directives on the ui-view element (e.g. ng-class) will work yet

[timkindberg]

Curious how/when that happened. I've seen no commits or merges pertaining to animation or 1.2 support.

[benbenwilde]

+1, please fix

[anton-rodin]

+1 Please fix it, it's important

[nicolas]

+1 thanks

[marcghorayeb]

👍

[homerjam]

+1

Curious that the docs/faq now state that 1.2 animation is supported, yet this isn't the case?

Also the 1.2 branch has gone!

This is the version I'm using, built from the 1.2 branch: http://pastebin.com/S7CX0zcb

[chriswep]

+1

why removing the 1.2 branch without merging it?

would very much like to use ui-router 0.2.7. thanks for the great work!

[benbenwilde]

Looks like this is fixed with UI Router 0.2.8.
I'm using AngularJS v1.2.7.

For an example, just add the "slide" class to your ui-view

<div ui-view class="slide">

And use the following css for your animation.

.slide {
    -webkit-transition: -webkit-transform .7s ease-in-out;
    -moz-transition: -moz-transform .7s ease-in-out;
    -o-transition: -o-transform .7s ease-in-out;
    transition: transform .7s ease-in-out;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide.ng-enter {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide.ng-enter.ng-enter-active, .slide.ng-leave {
    position: absolute;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide.ng-leave.ng-leave-active {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

Additionally, some animations seemed to have some weird behavior because of $uiViewScroll. I worked around it by adding autoscroll="false" to my ui-view element.

[chriswep]

thanks for the hint with $uiViewScroll. is this a (known) bug? what effect does autoscroll have on on the ui-view element (= in what way does it autoscroll the element)?

apart from that it seems to be working mostly..

[homerjam]

I think the unwanted scrolling behaviour occurs when $anchorScroll() is called - this resets the scroll position to the top even though this may not be desired - I removed it in the version I pasted above (would have made a PR but 1.2 branch vanished). Haven't tried it yet but autoscroll="false" is a good tip, thanks.

[timkindberg]

This all looks to be working now in 0.2.8. See the demo app: http://angular-ui.github.io/ui-router/sample/

[m4r71n]

Could please anybody create a working example with 0.2.8 and two different sliding-animations like @arush mentioned in his comment #320 (comment) ?
Thanks

[dlukez]

It's my understanding that the sliding animation still won't work because the code is backwards compatible and won't compile the ui view element properly

Sent from my iPhone

On 21/01/2014, at 8:07 AM, m4r71n notifications@github.com wrote:

Could please anybody create a working example with 0.2.8 and two different sliding-animations like @arush mentioned in his comment #320 (comment) ?
Thanks

—
Reply to this email directly or view it on GitHub.

[homerjam]

@m4r71n you might find this useful https://github.com/homerjam/angular-ui-router-anim-in-out

[timkindberg]

Also just updated the FAQ with a working plunkr: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-animate-ui-view-with-ng-animate

Also the sample now has working 1.2 animations as well: http://angular-ui.github.io/ui-router/sample/#/

[m4r71n]

@homerjam thanks for your animation directive but at the moment i'm not sure if it is useful for me.

As this issue is now closed i created this: https://groups.google.com/d/topic/angular-ui/h_ETkSq2N4k/discussion