angular-ui-router-anim-in-out
angular-ui-router-anim-in-out copied to clipboard
homerjam
Animation not working on load/reload
Animations are not fired when I load/reload the page. Is it normal behavior or did I do something wrong?
This is intentional behaviour - as described on the ui-router repo (sorry no link right now). The workaround to force this behaviour is to change to a blank state and back on load.
Let me know if you need an example
Thanks for the fast answer :) I'm not sure to understand what you mean. A blank state that redirect to "normal" states automatically? But will it work when I reload non root path (like mysite.com/about)? It would be much appreciated if you could provide with an example :)
Really good work by the way! Thanks!
The basic principle is like so:
// in app config
// configure blank state
$stateProvider.state('blankState', {});
// in app run (or main controller)
// record initial state (determined on first page load)
var initalState = [$state.$current.name, $stateParams];
// change to the blank state
$state.go('blankState');
// immediately change back to the initial state thus triggering the transition
$timeout(function(){
$state.go.apply(null, initialState);
});
When trying to use this technique, I get the error: The transition errored, detail: Error: Cannot transition to abstract state '').
I've tried it in a run block & in the main controller. I've tried it with the code as you've suggested it & also with the following code, neither successfully:
var initialState = $stateParams;
var currentName = $state.current.name;
$state.go('blankState');
$timeout(function(){
$state.go(currentName, initialState);
});
The blank state is configured as you suggested. The error is from the second $state.go (or $state.go.apply). Do you have any suggestions, clues? Thanks!
So I found out that animations on load work if you do the following:
<body ng-animate-children="true">
From comments at https://github.com/angular/angular.js/issues/10536#issuecomment-67877870 .