CODEWITHSUNDEEP
angularjsangular-ui-router
mjaydip
mjaydip

Reputation: 143

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

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.

Upvotes: 1

Views: 286

Answers (1)

mjaydip
mjaydip

Reputation: 143

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!

Upvotes: 1

Related Questions