代码段

var app = angular.module('myApp', ['ngAnimate']);

app.controller('MainController', ['$scope',
  function MainController($scope) {
    $scope.animate = false;
    $scope.play = function() {
      $scope.animate = !$scope.animate;
    }

  }
]);

这里是js fiddle https://jsfiddle.net/tridip/mvL0o2ew/

Answer 1

您在控制台中收到错误：

angular.js:12520 TypeError: Cannot read property 'animate-show' of undefined
    at lookup (angular-animate.js:365)
    at performAnimation (angular-animate.js:688)
    at Object.removeClass (angular-animate.js:583)
    at Object.ngShowWatchAction [as fn] (angular.js:27760)
    at Scope.$digest (angular.js:15896)
    at ChildScope.$apply (angular.js:16160)
    at HTMLButtonElement.<anonymous> (angular.js:23618)
    at defaultHandlerWrapper (angular.js:3346)
    at HTMLButtonElement.eventHandler (angular.js:3334)

您需要正确包含正确的ng-animage模块及其类

Answer 2

您忘记包含angular.js文件本身。所以包括它，就可以了。

演示：

var app = angular.module('myApp', ['ngAnimate']);
app.controller('MainController', function($scope) {
  $scope.animate = false;
  $scope.play = function() {
    $scope.animate = !$scope.animate;
  }
});

.animate-show,
.animate-hide {
  -webkit-transition: all linear 1s;
  -moz-transition: all linear 1s;
  -ms-transition: all linear 1s;
  -o-transition: all linear 1s;
  transition: all linear 1s;
}

.animate-show.ng-hide-remove,
.animate-hide.ng-hide-add.ng-hide-add-active {
  opacity: 0;
  display: block !important;
}

.animate-hide.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.13/angular-animate.js"></script>

<body ng-app="myApp" ng-controller="MainController">
  <button ng-click="play()">play</button>
  <div id='wrapper' ng-show="animate" class="animate-show animate-hide">TEST HERE</div>
</body>

AngularJS显示隐藏div，淡入/淡出效果不起作用

代码段

2 个答案: