Angularjs анимация не работает, и я попал в тупик

Question

Это мой код, на который вы можете посмотреть, если это возможно. Ничего официального, я просто отложил этот код для последующего использования.

<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>

Переключатель работает нормально, но я попробовал все возможные способы заставить анимацию работать без успеха. Может ли кто-нибудь помочь мне с этим? Большое спасибо!

Answer 1

Таким образом, вы не используете правильные классы для нг-шоу.

Правильные классы следующие:

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

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

Так что просто поменяйте их с теми, которые вы используете, и вам будет хорошо идти.

Хитрость, которую я использую, заключается в том, что на ваш CSS накладывается длительное время перехода, например, 5 с, после чего вы можете проверить элемент при его переходе и увидеть применяемые классы.

Кроме того, вы должны просто добавить переходы в базовый класс, так что...

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

Плункер для доказательства! http://plnkr.co/edit/JJBv9pk8CSqN7Mmv8Qcx?p=preview

Редактировать для получения дополнительной информации: я считаю, что.ng-оставить / ввести для нг-повторов, когда элементы меняются. У каждого типа вещей разные классы.