Custom views transitions

[ludinov]

Is it possible to make ui-view directive hook-able (e.g. with another custom directive in ui-view attributes or with view config) to implement custom views transitions (like github src tree navigation or mobile sliding).
Something like http://ajoslin.github.com/angular-mobile-nav/ , but with ability to amend transition behavior with js.

[ksperling]

Looks very cool. Essentially where ui-view currently just replaces the contents of a DOM node, we'd keep the old content around and leave it to an animation callback to play with.

[adamburmister]

I'd love to see this support too

[nateabele]

👍

[timkindberg]

Take a look at @matsko animation pull request: angular/angular.js#2006. It looks like animations are coming to other directives in angular via this pull request.

yearofmoo (aka matsko) says in a tweet:

The ngAnimate directive will provide animation event hooks for ngRepeat, ngShow, ngHide, ngInclude, ngView & ngSwitch

So we should look at how he's doing it and do it in a similar way for our new uiView. Perhaps @matsko could help us out as well since he's already done it once :).

[matsko]

Yup that's the plan. To provide animation hooks directly for common ng directives as well as custom directives. The animation hooks will be at core level and you can easily animate your ngView directive to have transition effects between views, make repeated elements fade in and fade out upon insert & remove, and create natural show and hide effects without the need to hack the $scope variable to bits to interface with some dhtml/jquery plugin (but yes you will still need something like jQuery, MooTools or CSS3 transitions to actually DO the animation itself, but AngularJS won't limit you to having to stick with JQuery alone).

And the great thing is that your $scope logic will stay the same ... you update your $scope variable and then the animations follow (depending on the directive that they're attached to).

The ngAnimate directive is almost done and it will be directly in the core. Not too much longer of a wait :)

BTW, that pull request is a bit old and the code there has been iterated over a bit further. So it's best to wait just a bit longer to see the final syntax of ng-repeat="...". Once it's ready then I can help you guys out with an example of how to make it work to get rid of this issue.

[adamburmister]

@matsko you're my hero, mate.

[matsko]

👍 Thanks @adamburmister :)

[timkindberg]

Cool, so we'll await your final implementation. Please, if you remember, let us know in this thread when its ready. I'm also following you on twitter so you could just tweet about it when its done too.

[matsko]

Sounds good :) Thank you for subscribing to the @yearofmoo twitter page.

[ajoslin]

Thanks @matsko, looking forward to this 😄

[klebba]

Sounds like ngAnimate is going to be quite useful; any more hints about an ETA?

[JonnyBGod]

+1

[ghost]

@matsko You're a hero of many men. Anxiously awaiting.

[matsko]

Hey guys. Super close with the animations. Can't say exactly how long it will take (hopefully not longer than a week). The code reviewing takes up a lot of time and ngRepeat + some of the functionality of the scope had to be changed to get the animations to work properly. But we're down to a final'ish pull request which has everything required for the animations. angular/angular.js#2252

I'll be sure to post a demo soon ... and yes there's a sweet article ready :)

[timkindberg]

Awesome!

[0x-r4bbit]

Looking forward to it!

Am Freitag, 29. März 2013 schrieb Tim Kindberg :

Awesome!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/22#issuecomment-15643735
.

[matsko]

Hey guys. Animations are ready.

Here are the docs for animating ngView:
http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngView#animations

Here's a demo:
http://yearofmoo-articles.github.com/angularjs-animation-article/app/

I'll have the animations article up shortly.

[matsko]

It's ready:

http://www.yearofmoo.com/2013/04/animation-in-angularjs.html

[ksperling]

Looks great!

[ksperling]

@matsko just took a stab at integrating this and it's incredibly simple, great job! Only one small hitch (hinted at in your article) when template content isn't wrapped in a single top level element, the logic that derives the transition duration via $window.getComputedStyle throws (at least in FF) on non-elements.

I've monkey patched angular.js on the branch just to check if that fixes the issue, and it seems to be working: e080bc4

One thing that would be great would be if animator.enter and .leave had a flag to make the animation run in reverse (e.g. via a separate additional CSS class with '-reverse' suffix for CSS transitions) so that we could make going back in the browser history is visually the reverse of going forwards (see #52). There's more work to do from our end to actually detect history back though.

[jeme]

@ksperling since there is already a way to "alternate" between what animations you select, e.g. as mentioned in the video, if an element is at a lower index then you could move right instead of left... (he talks about the http://yearofmoo-articles.github.com/angularjs-animation-article/app/#/ng-switch example)...

In such case, i think that when selecting a transition for a view (through a function), that should be at that point you select the "back" animation instead. That way it is easier to write 3rd party animations and share them, as they stay simple and then you just select the right ones.

[legomind]

so is it possible to use ng-animate with ui-view yet?

[ksperling]

There is support on a branch: https://github.com/angular-ui/ui-router/tree/issue-22

The reason I haven't merged it into trunk yet is because
(1) I had to tweak some ng-animate code
(2) it still needs some feature detection so that ui-router can be used with the stable branch of angular that doesn't have ng-animate yet

[jeme]

@ksperling to point nr. 2... While I hate developing on multiple branches, hate it with passion... I would say that an alternative would be to have a branch following the stable version and another following their latest and greatest...

[legomind]

Ok. So its not ready for primetime just yet?
On Apr 13, 2013 7:06 AM, "Karsten Sperling" notifications@github.com
wrote:

There is support on a branch:
https://github.com/angular-ui/ui-router/tree/issue-22

The reason I haven't merged it into trunk yet is because
(1) I had to tweak some ng-animate code
(2) it still needs some feature detection so that ui-router can be used
with the stable branch of angular that doesn't have ng-animate yet

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/22#issuecomment-16331323
.

[ksperling]

@jeme Yeah, it's a pita... I guess it depends how long it will be until ng-animate becomes available on a stable version of AngularJS.

[ksperling]

YMMV without this fix: angular/angular.js#2405

[ksperling]

@jeme turns out the feature detection was pretty easy in this case so i've merged the branch now

[jeme]

@ksperling it wasn't as much if it was easy or hard to do the feature detection, it was more from a design perspective, if we wanted to try and support 2 different releases sort on on a single branch here, it seems like it could potentially become a feature detection mess down the road...

[ksperling]

@jeme Yeah I guess if we run into problems with stable vs unstable of Angular down the line we can always switch to having a separate branch.

[matsko]

Hey guys. I've only now been able to catch up with your messages. Is there anything super urgent that you guys find needs to be looked at with ngAnimate in regards to AngularUI?

[jeme]

@matsko right now, i think the highest thing on the wishlist would be for completion handlers in the animator returned object.

something like:

animate.leave(element.contents(), element, function() {
   //on complete.
});

animate.enter(contents, element, function() {
   //on complete.
});

taken my example from this issue: #85

app.animation('wave-enter', function ($rootScope, $timeout) {
    return {
        setup: function (element) {
            var elm = $(element);
            var parent = elm.parent();
            elm.addClass('wave-enter-setup');
            parent.css({ 'height': elm.height() });
            parent.addClass('stage');

            return $rootScope.$watch(function () {
                parent.css({ 'height': elm.height() });
            });

        },
        start: function (element, done, memo) {
            var elm = $(element);
            var parent = elm.parent();
            elm.addClass('wave-enter-start');

            $timeout(function () {
                memo();

                elm.removeClass('wave-enter-setup');
                elm.removeClass('wave-enter-start');

                parent.removeClass('stage');
                parent.css('height', null);

                done();
            }, 2000);
        }
    };
});

app.animation('wave-leave', function ($rootScope, $timeout) {
    return {
        setup: function (element) {

            $(element).addClass('wave-leave-setup');
        },
        start: function (element, done, memo) {
            $(element).addClass('wave-leave-start');
            $timeout(function () {
                $(element).removeClass('wave-leave-setup');
                $(element).removeClass('wave-leave-start');
                done();
            }, 2000);
        }
    };
});

Note how horrible it is to create a even only close to functional "wave" transition for a view (that also goes for the core ng-view, you actually commented on such a request over at your site. : http://www.yearofmoo.com/2013/04/animation-in-angularjs.html#comment-856953540)

I think given completion handler to enter and exit, would enable us to provide some of that "horrific stuff" inside the view directive, so we could say that we will attach some classes to the view it self during animation.

Then you could suddenly stick with a CSS animation again.

Alternatively provide sort of a "on-css-animate" handler, to be able to be notified during animation of special events, yet stick to CSS for defining the animation as a whole, as you see in the above, that is what I tried to do...

But that could maybe be more simple if we where to:

app.animation('wave-enter', function ($rootScope, $timeout) {
    return {
        cssclass: 'wave', //Tell it we are creating a css bound handler, will only run if the class exists or something
        setup: function (element) {
            //this is really more of an "onSetup" as it is now optional.
        },
        start: function (element, done, memo) {
             //this is really more of an "onSetup" as it is now optional.
        },
        end: function (element) {
             //this is really more of an "onEnd" as it is now optional.
        } 
    };
});

That way, we only had to focus on the surrounding element which requires all those things handled.

I am not sure if some of it is already possible, but I couldn't find anything in the documentation or your site at least. Anyways, the last idea is like really abstract currently... from a "ui-view"

[timkindberg]

Also there seems to be some discussion of a possible bug within animator over at this pull request: #96 (comment)