How to synchronize angular ui-router's ui-view state change with css animation

Question

In my application when I manually change state with $state.go('state-1'), the target view appears before the current view was faded out. Can anyone help me resolve? States are defined as below code:

myApp.config(['$stateProvider','$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('parent1', {
                abstract: true,
                url: '/parent1',
                templateUrl: '...'
            })
            .state('parent1.child1',{
                url:'/child1',
                templateUrl:"..."
            })                
            .state('parent2', {
                abstract: true,
                url: '/parent2',
                templateUrl: '...'
            })
            .state('parent2.child1', {
                url: '/child1',
                templateUrl: '...'
            });
    }]);

Now from one of my controllers,I am changing state "parent2.child1 to parent1.child1"

$state.go('parent1.child1');

Both the ui-view divs are having class "animated fadeIn" from animate.css

When the $state.go executes, partial of state "parent1.child1" appears before the current state's view is faded out.

Thanks.

Provide fiddle or plunkr.

Jay Shukla
– Jay Shukla

2015-07-21 06:17:55 +00:00
Commented Jul 21, 2015 at 6:17 — Jay Shukla
– Jay Shukla, Commented Jul 21, 2015 at 6:17

mjaydip · Accepted Answer · 2015-07-22 07:40:01Z

1

Thanks @jay for your inputs.

I got resolution of this issue. It was due to mix use of ngAnimate and animate.css animations together.

I removed ngAnimate and this issue is now fixed.

Thanks!

answered Jul 22, 2015 at 7:40

mjaydip

1431 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to synchronize angular ui-router's ui-view state change with css animation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related