CSS animate bg colour and page transition at same time

ionic-v1
1

Hi,
Is it possible to css animate a div (background-color) that is outside the ng-view, using a directive on a $state inside the ng-view?

The ion-nav-view has css animations for the routing.

If I do not animate the div then the ion-nav-view anims work fine, but… If I add animation classes to the div(bgId) then the routing anims do not fire.

Here is a sample of html:

<body ng-app="app" ng-controller="MainCtrl"> 
    <div id="bgId" class="{{colorVal}}">
        <ion-nav-view animation="slide-left-right">
        </ion-nav-view>
    </div>
    <button swapcolour="changeColour()">change colour</button>
</body>

This is controlled by a directive(swapcolour) that updates the colorVal in MainCtrl.

I do not know why it fails. Any ideas??