AngularJS and ui.route seamless navigation

Question

I'm having an issue. I'm building a Angular App, I'm using angular ui router.

I want to stop the navigation from one page to another until I'm running a dom animation

I know I have onStateSuccess and onStateStart but I don't know how to stop going to that state until I ran an animation.

I know I can navigate with $state.go('localhost') but I am looking for a better approach to stop and resume the event.

Any ideas?

EDIT

I see that I can stop the event on change start, is there a way to resume it after I ran a few functions?

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
            console.log(event);
            console.log(toState);
            console.log(toParams);
            console.log(fromState);
            console.log(fromParams);
            event.preventDefault();

            // transitionTo() promise will be rejected with
            // a 'transition prevented' error
        });

TheSharpieOne · Accepted Answer · 2013-09-09T20:27:17.817

2

On $stateChangeStart check to see if you are currently animating (using a flag). If you are not, set a flag to indicate that you are animating. If you are animating, push the new requested view into an array. Returning false will cancel the request.

On $stateChangeSuccess set the animating flag to false and check the array mentioned above for requested views, if it has something $state.go() to it.

UPDATE

At the start of your animations set a flag to true and use that to prevent the page from changing as noted above. Set a timeout for how long your longest animation is. The timeout would them set the animation flag to false and trigger the real state change.

edited Sep 09 '13 at 20:27

answered Sep 09 '13 at 20:05

TheSharpieOne

25,646
9
66
78

This is sound thinking :) ... Thanks, I'll try it out! I am always looking of complicated ways to make my life harder :). This is simple and elegant! – Arthur Kovacs Sep 09 '13 at 20:08
I assumed that the animations were coming from the transitions between pages. After re-reading your edited posted it sounds like the animations are coming from somewhere else. If this is the case let me know so that I can update my answer. – TheSharpieOne Sep 09 '13 at 20:12
Oh, yes, Animations are coming from somewhere else, I want to 'MOLD' the content on the CURRENT PAGE so it looks like the content on the TO PAGE and then do the transition. It sounds weird, but on the home page I have info from different categories, you click one of those blocks, the block gets big and assumes the styling I have on the page where i have that single content, convoluted, but I think it could make for a smooth navigation. – Arthur Kovacs Sep 09 '13 at 20:13
Using jQuery for animations? – TheSharpieOne Sep 09 '13 at 20:17
Yes :(, DOM manipulation only class wise (adding a class 'in-transition'), lots of CSS3 that does the heavy lifting, I'm thinking on switching to directives later on. Although I could add the class though Angular ... but still, it's not clean, I know, I still to do some more reading on directives. – Arthur Kovacs Sep 09 '13 at 20:18
P.S. - I hate jQuery animations :) I try to learn angular step by step by making projects and reading in parallel and mostly sticking to the good practices, but I still have a few ways to go – Arthur Kovacs Sep 09 '13 at 20:20
1

Arthur, here are two suggestions: 1) If you are using jQuery animations, does it not have a callback/complete function that gets called upon the animation finishing? If so, initiate your $state.go() transition in the callback. 2) If you are using CSS3 transitions, bind to the transitionend or animationend events See http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes for all vendor-specific event names. – cbayram Sep 10 '13 at 04:48
I'm going to use CSS3 Transitions, but I hoped to avoid making a ton of $state.go() statements for every possible animation I'm gonna have, I'm thinking of making a more general purpose function that intercepts where I want to go, runs a certain function/animation class respective to the element that has been clicked and resumes on completion of animation. I'll give it more thought and some testing this evening. The idea is that I want to build this with expandability for future animations/locations in mind and as little code as necessary. – Arthur Kovacs Sep 10 '13 at 09:41
E.g. When I navigate from home to Photos listing, a sort of animation is run, and when I navigate from Home to Blog listing something else, the same for X Listing -> X Single page etc. I'm thinking that I could send the state and transition kind as parameters to a function, this would imply not to have any links, only handlers attached to them. This could make for an interesting directive, I'll have to get to the directives chapters really soon :). – Arthur Kovacs Sep 10 '13 at 09:44
This is a mighty interesting article/info :) http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes thumbs up. – Arthur Kovacs Sep 10 '13 at 09:47

AngularJS and ui.route seamless navigation

1 Answers1