Question

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/angular/angular.js" defer></script>
    <script src="node_modules/angular-animate/angular-animate.js" defer></script>
    <!-- Own script section -->
    <script src="app.js" defer></script>
    <!-- CSS section -->
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body ng-app="MainApp">
    <div ng-controller="MainController as mainCtrl">
        <span class="test" ng-init="showSpan=true" ng-click="showSpan=false" ng-show="showSpan">Test</span>
    </div>
</body>
</html>

App.js：

(function() {
    angular.module('MainApp', ['ngAnimate'])
        .controller('MainController', function() {

        });
})();

风格：

.test {
    font-size: 30px;
    font-weight: bold;
}
.test.ng-hide-add {
    opacity: 1;
}
.test.ng-hide-add-active {
    opacity: 0;
    transition: opacity 1s linear;
}

Angular应该在点击ng-hide-add和ng-hide-add-active之后添加到span，但这不会发生。为什么？？我使用最新的角度和角度动画。 Angular仅在点击后添加ng-hide。

Answer 1

问题解决了，我必须使用角度动画1.4.3，探测性地在1.4.4中有变化我还没有看到

Answer 2

showSpan 未在控制器中创建。

(function() {
    angular.module('MainApp', ['ngAnimate'])
        .controller('MainController', function($scope) { /* dont forget to call $scope here */
          $scope.showSpan = true; /* this must exists */
        });
})();

Look！

Answer 3

你在完成css（.test.ng-hide-add-active css）时缺少.ng-hide-add。

http://plnkr.co/edit/dtyTHz30EiFV4PEjMWN8?p=preview

.test.ng-hide-add {
  opacity: 1;
}

/* The finishing CSS styles for the hide animation */
.test.ng-hide-add.ng-hide-add-active {
  transition: 1s linear all;
  opacity: 0;
}

Answer 4

当我使用它时：

 <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-animate@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-animate.js"></script>

一切正常，问题在于角度分布。

Angular animate不添加ng-hide-add和ng-hide-add-active

4 个答案: