Change $rootScope variable to trigger ng-show in the $stateChangeStart event

Question

What I'm trying to accomplish is a fade-in and a fade-out effect when the state of my SPA changes.

In order to do this I figured it would be a good idea to use ng-show and CSS animations and changing the visibility when a state would change.

In order to do this I've created the following CSS:

.fadePage {
    animation: fadein 3s;
}
.fadePage.ng-hide {
    animation: fadeout 3s;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

For checking the state changes I'm using the $stateChangeSuccess and $stateChangeStart events.

The $stateChangeStart will set a variable showPageContents to false. This should trigger the fading out. I'm also delaying the changing of state, so the fade out animation can be seen by the user.

In the $stateChangeSuccess I want to trigger the fading in, so I'm setting the showPageContents back to true again.

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    log.debug('State change succes : `' + JSON.stringify(toState) + '`');
    $rootScope.kioskApplication.showPageContents = true;
    kiosk.updateClientViewState(toState.name);
});

$rootScope.$on('$stateChangeStart', function (event, nextState, currentState) {
    if ($rootScope.kioskApplication.showPageContents) {
        $rootScope.kioskApplication.showPageContents = false;
        event.preventDefault();
        $timeout(function () {
            $state.go(nextState.name);
        }, 3000);
    }
});

In order to check on these events I've got a watcher set in the controllers.

$rootScope.$watch('kioskApplication.showPageContents', function () {
    $scope.showPageContents = $rootScope.kioskApplication.showPageContents;
});

The fading in succeeds with the above code, but fading out appears not to happen. By debugging I can see the $rootScope.kioskApplication.showPageContents is set properly, but this doesn't trigger the watcher and/or the ng-show.

I figure this might have something to do with changing the state which might cause some actions not to be executed anymore, but I'm not sure on this.

Is there a way I can trigger the fading out with the above code?

Also, the above mentioned method appears to be a bit cumbersome and complex. I'm sure there's an easier way to trigger the fading in and fading out of the page, but I'm not sure why.

So, if you have a better solution for this problem, I'm eager to know how because I'm still learning AngularJS and CSS.

It might be good to know, the user doesn't trigger the state changes. These changes are triggered using RPC calls made by the server. Because of this I can't rely on user actions on the screen.

For the sake of being complete, here's the markup I'm using:

<div class="col-md-offset-3 col-sm-offset-0 col-md-6 col-sm-12 startcontainer fadePage" ng-show="showPageContents">
    <!-- the insides... -->
</div>