ng-show 与 ng-animate 无法正常工作答案

【问题标题】：ng-show with ng-animate not working correctlyng-show 与 ng-animate 无法正常工作
【发布时间】：2014-04-27 20:46:21
【问题描述】：

我在下面的 sn-p 中看不到我的错误。目标是让 div 淡入淡出，而我的结果是它们立即隐藏/显示。谁能指出我看不到的错误。

PLNKR-http://plnkr.co/edit/c0HgL56yOqrznIkfbmsR?p=preview

HTML/脚本

<body ng-controller="test">

    <p>
      <button ng-click="show=!show">Toggle</button>
    </p>

    <div ng-show="show" 
         class="blue-div animate-show">A</div>

    <div ng-hide="show" 
         class="green-div animate-show">B</div>

    <script>
      angular.element(document).ready(function(){

        var app=angular.module("app",[]);

        app.controller("test",function($scope){
            $scope.show=false;
        });

        angular.bootstrap(document,["app"]);

      });
    </script>

  </body>

CSS

.blue-div{
  width:100%;
  height:200px;
  background-color:blue;
}

.green-div{
  width:100%;
  height:200px;
  background-color:green;
}

.animate-show {
  -webkit-transition:all linear 1s;
  transition:all linear 1s;
  opacity:1;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
  display:block!important;
}

.animate-show.ng-hide {
  opacity:0;
}

【问题讨论】：

标签： javascript css angularjs ng-animate

【解决方案1】：

将您的 css 类更改为：

.animate-show {
  display:block!important;
  -moz-transition:all linear 1s;
  -o-transition:all linear 1s;
  -webkit-transition:all linear 1s;
  transition:all linear 1s;
  opacity:1;
}

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

本质上，它想要：

display:block!important;

【讨论】：

您需要它们具有绝对位置，否则 div B 将低于 div A。

【解决方案2】：

要使用 Angular 的动画系统，您需要在应用程序中包含 ngAnimate 模块作为依赖项。

引用angular-animate.js并添加模块：

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

演示： http://plnkr.co/edit/XLsfJokFEvlKFsTByKt5?p=preview

【讨论】：

【解决方案3】：

我遇到了同样的问题，我发现文档遗漏了 tasseKATT 提到的关键部分。

我会谨慎使用被选为正确答案的方法。这会改变 Angular 不知道的地方的事情，因此可能导致不当行为。

将您的转换代码放在以下类中：

.barGraphDiv.ng-hide-add.ng-hide-add-active,
.barGraphDiv.ng-hide-remove.ng-hide-remove-active {
    -webkit-transition: all linear 5s;
    transition: all linear 5s;
}

然后在你的应用中，一定要注入ngAnimate。这让 Angular 知道在 ng-show 和 ng-hide 上添加这些类，并在移除它们之前等待 CSS 中的指定时间。

【讨论】：