Are you able to use CSS animations to animate a div's background color that is located outside of the ng-view, while using a directive on a $state within the ng-view?
The ng-view already has CSS animations for routing.
When I try to add animation classes to the div (bgId), the routing animations do not work properly. However, if I leave the div without any animations, the ng-view animations function correctly.
Below is an example of the HTML code: (Please note that the button is included as an example and would typically be found in template pages like home.html or login.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()" data-nxtpage="1">change colour</button>
</body>
A directive called 'swapcolour' controls this functionality by retrieving the value 'nxtpage' from the button attributes and updating the 'colorVal' in MainCtrl.
//MainCtrl.js
.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {
$scope.colorVal = 'redBg';
}])
//Directive.js
.directive('swapcolour', function ($rootScope, $state) {
var pageArr = [{home:'redBg'},{login:'blueBg'}];
return function (scope, element, attrs) {
var nextPageNum = attrs.nxtpage;
var obj = pageArr[nextPageNum];
var item = Object.keys(obj);
var objItem = obj[item];
element.bind('click', function () {
$state.transitionTo(item[0]);
$rootScope.$$childHead.colorVal = objItem;
});
}
}])
I'm unsure why it's not working. Any suggestions? I'm new to directives. (I'm trying to set up a Plunker, but facing difficulties getting Ionic to work with it)