Currently delving into AngularJs, particularly focusing on angular-animate. Within the html, I have a toggle that smoothly transitions the div with the class "my-first-animation". How can I add a transition to the background simultaneously? I want the background color of the body to smoothly fade from white to black when the div with the class "my-first-animation" appears. Any insights on how to achieve this would be greatly appreciated. UPDATE: K.Torres' solution worked like a charm. Thank you. However, despite adding the dark-bg transitions to the CSS as shown below, it doesn't seem to work. Any ideas why? Thanks.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title> Applying Animations</title>
<script src="js/angular.js"></script>
<script src="js/angular-animate.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ngAnimate']);
app.controller('homeCtrl', function ($scope){
$scope.on = false;
});
</script>
<style>
/*start*/
.my-first-animation.ng-enter{
transition: .5s all;
opacity: 0;
}
.my-first-animation.ng-enter-active{
opacity: 1;
}
.my-first-animation.ng-leave{
transition: .5s all;
opacity: 1;
}
.my-first-animation.ng-leave-active{
opacity: 0;
}
.dark-bg.ng-add {
transition: .5s all;
background:white;
}
.dark-bg.ng-add-active {
background:gray;
}
.dark-bg.ng-remove {
transition: .5s all;
background:gray;
}
.dark-bg.ng-remove-active {
background:white;
}
</style>
</head>
<body ng-controller="homeCtrl" ng-class="{ 'dark-bg': on }">
<button ng-click="on=!on">Toggle Content</button>
<div class="my-first-animation" ng-if="on">
This content will fade in over a half second.
</div>
</body>
</html>