My aim is to create a dynamic animation for the background image when the view changes. The current background image is set through a function defined within MainController:
// app/js/controllers.js
$scope.getBg = function() {
return $route.current.scope.pageBg || 'bg-intro';
};
This function simply returns a class name (each Controller has 'pageBg' defined separately) that should be applied to the body element:
// app/index.html
<body ng-class="getBg()">
...
</body>
The CSS classes used look like this:
.bg-intro {
background: #4d4638 url(../img/home.jpg) no-repeat top center;
}
I have attempted both CSS and JS solutions but have not had success.
CSS approach:
/* app/css/animations.css */
.bg-intro.ng-enter,
.bg-intro.ng-leave {
background: #ffffff;
}
.bg-intro.ng-enter {
animation: 0.5s fade-in;
}
.bg-intro.ng-leave {
animation: 0.5s fade-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
JS method (using Greensock):
.animation('.bg-intro', function() {
return {
enter: function(element, done) {
TweenMax.set(element, { backgroundColor:"#ffffff"});
TweenMax.from(element, .5, {alpha:0, ease:Power2.easeInOut, onComplete:done});
return function(cancel) {
if(cancel) {
element.stop();
}
};
},
leave: function(element, done) {
TweenMax.set(element, { backgroundColor:"#ffffff"});
TweenMax.to(element, .5, {alpha:0, ease:Power2.easeInOut, onComplete:done});
return function(cancel) {
if(cancel) {
element.stop();
}
};
}
}})
What initially seemed like a straightforward task has turned out to be more challenging than expected.