Angularjs animation not working and I hit a deadend

Question

This is my code for you to have a look at if possible. Nothing official there, I just set this code aside to be used later.

<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 works fine, but I tried every possible way to get the animation to work without success. Could somebody please give me a hand with this? Many thanks!

Answer 1

So you are not using the right classes for ng-show.

The correct classes are as follows...

.ng-hide-add.ng-hide-add-active

.ng-hide-remove.ng-hide-remove-active

So just change out these with the ones you are using and you will be good to go.

A trick I use, is put a long transition time on your css, like 5 s, then you can inspect the element while its transitioning and see the classes that are being applied.

Also, you should just add the transitions to the base class, so...

.hideShow {
  transition: .25s linear all ;
  -moz-transition:  .25s linear all;
  -webkit-transition:  .25s linear all ;
}

Plunker for proof! http://plnkr.co/edit/JJBv9pk8CSqN7Mmv8Qcx?p=preview

Edit for more info: I believe .ng-leave/enter is for ng-repeats, when the items change. Each type of thing has different classes.