0

这是我的代码，如果可能的话，你可以看看。那里没有任何官方信息，我只是将这段代码放在一边以备后用。

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

切换工作正常，但我尝试了所有可能的方法来让动画正常工作但没有成功。有人可以帮我解决这个问题吗？非常感谢！

4

1 回答 1

0

所以你没有为 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，当项目发生变化时。每种类型的事物都有不同的类别。

于 2015-02-05T17:25:12.187 回答