不要添加ng-hide-add和ng-hide-add-active

Angular animate don't add ng-hide-add and ng-hide-add-active

本文关键字：ng-hide-add-active ng-hide-add 添加      更新时间：2023-09-26
    <!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和angular-animate。Angular只在点击后添加ng-hide。

问题解决了，我必须使用angular-animate 1.4.3，可能在1.4.4有变化，我还没有看到

showSpan未在控制器中创建。

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

看!

在完成css (.test. net)时缺少。ng-hide-add。ng-hide-add-active css) .

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

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

当我使用这个时:

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

一切工作正确，问题是角分布。

相关文章：