Angularjs動畫無法正常工作，我碰到了一個死樹

Question

這是我的代碼，如果可能的話，請看看。沒有官方的，我只是把這個代碼放在一邊以便以後使用。

<script> 
 
\t var apps = angular.module('myApp', ['ngAnimate']); 
 
\t 
 
\t //header 
 
\t apps.controller('headerCtrl', function($scope) { 
 
\t  $scope.header = "Animating with AngularJS and"; 
 
\t \t $scope.headerCode= "CSS3" 
 
\t }); 
 
\t 
 
\t //footer 
 
\t apps.controller('footerCtrl', function($scope) { 
 
\t  $scope.footerItems = ['Footer Item 1', 'Footer Item 2', 'Footer Item 3']; 
 
\t }); 
 
\t 
 
\t //animate hide/show 
 
\t apps.controller('animateCtrl', function($scope) { 
 
\t  $scope.testText = "This is just to test the animation effect!!"; 
 
\t \t $scope.toggleBox = false; 
 
\t \t $scope.Toggle = function() { 
 
\t \t $scope.toggleBox = !$scope.toggleBox; 
 
\t \t } 
 
\t }); 
 
\t 
 
\t </script>

.hideShow.ng-enter, 
 
\t { 
 
\t transition: 0.5s linear all ; 
 
\t -moz-transition: 0.5s linear all; 
 
\t -webkit-transition: 0.5s linear all ; 
 
\t opacity:0; 
 
\t 
 
\t } 
 
\t 
 
\t .hideShow.ng-enter.ng-enter-active 
 
\t { 
 
\t opacity:1; 
 
\t } 
 
\t 
 
\t .hideShow.ng-leave 
 
\t { 
 
\t transition: 0.25s linear all ; 
 
\t -moz-transition: 0.25s linear all; 
 
\t -webkit-transition: 0.25s linear all ; 
 
\t opacity:0; 
 
\t } 
 
\t 
 
\t .hideShow.ng-leave.ng-leave-active 
 
\t { 
 
\t opacity:0; 
 
\t }

<div class="container-fluid" ng-app="myApp"> 
 
\t 
 
\t \t <header ng-controller="headerCtrl"> 
 
\t \t \t <div class="jumbotron page-header"> 
 
\t \t \t \t <h1>{{header}} <kbd>{{headerCode}}</kbd></h1> 
 
\t \t \t </div> 
 
\t \t </header> 
 
\t \t 
 
\t \t 
 
\t \t <!--MAIN CONTENT (animate)--> 
 
\t \t 
 
\t  <div class="jumbotron" ng-controller="animateCtrl"> 
 
\t \t \t <button class="btn btn-primary" ng-click="Toggle()">TOGGLE</button> 
 
\t \t \t <div class="hideShow" ng-show="toggleBox"><h2>{{testText}}</h2></div> 
 
\t \t  
 
\t \t </div> 
 
    
 
    
 
\t 
 
\t <!-- FOOTER --> 
 
\t <div class="navbar navbar-inverse navbar-fixed-bottom" ng-controller="footerCtrl"> 
 
\t \t <footer> 
 
\t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t <li class="navbar-brand" ng-repeat="footerItem in footerItems"> {{footerItem}} </li> 
 
\t \t \t </ul> 
 
\t \t \t </footer> 
 
\t </div> 
 
\t 
 
\t 
 
</div>

的切換工作正常，但我想一切可能的方式獲得動畫沒有成功的工作。有人可以幫我一把嗎？非常感謝！

Answer 1

所以你沒有在ng-show中使用正確的類。

正確的類如下...

.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 ; 
} 

Plunker的證明！ http://plnkr.co/edit/JJBv9pk8CSqN7Mmv8Qcx?p=preview

編輯瞭解更多信息： 我相信.ng-leave/enter是ng-repeats，當物品發生變化時。每種類型的東西都有不同的類別。