Here is the code I've put together for you to review, with no official purpose in mind. I just saved this code to use at a later time.
<script>
var apps = angular.module('myApp', ['ngAnimate']);
//header
apps.controller('headerCtrl', function($scope) {
$scope.header = "Animating with AngularJS and";
$scope.headerCode= "CSS3"
});
//footer
apps.controller('footerCtrl', function($scope) {
$scope.footerItems = ['Footer Item 1', 'Footer Item 2', 'Footer Item 3'];
});
//animate hide/show
apps.controller('animateCtrl', function($scope) {
$scope.testText = "This is just to test the animation effect!!";
$scope.toggleBox = false;
$scope.Toggle = function() {
$scope.toggleBox = !$scope.toggleBox;
}
});
</script>.hideShow.ng-enter,
{
transition: 0.5s linear all ;
-moz-transition: 0.5s linear all;
-webkit-transition: 0.5s linear all ;
opacity:0;
}
.hideShow.ng-enter.ng-enter-active
{
opacity:1;
}
.hideShow.ng-leave
{
transition: 0.25s linear all ;
-moz-transition: 0.25s linear all;
-webkit-transition: 0.25s linear all ;
opacity:0;
}
.hideShow.ng-leave.ng-leave-active
{
opacity:0;
}<div class="container-fluid" ng-app="myApp">
<header ng-controller="headerCtrl">
<div class="jumbotron page-header">
<h1>{{header}} <kbd>{{headerCode}}</kbd></h1>
</div>
</header>
<!--MAIN CONTENT (animate)-->
<div class="jumbotron" ng-controller="animateCtrl">
<button class="btn btn-primary" ng-click="Toggle()">TOGGLE</button>
<div class="hideShow" ng-show="toggleBox"><h2>{{testText}}</h2></div>
</div>
<!-- FOOTER -->
<div class="navbar navbar-inverse navbar-fixed-bottom" ng-controller="footerCtrl">
<footer>
<ul class="nav navbar-nav">
<li class="navbar-brand" ng-repeat="footerItem in footerItems"> {{footerItem}} </li>
</ul>
</footer>
</div>
</div>The toggle functionality works correctly, but I've been struggling to get the animation to work despite trying various approaches. Can anyone lend me a hand with this? Thank you in advance!