Question

我无法在下面的代码段中看到我的错误。目标是让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;
}

Answer 1

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

参考angular-animate.js并添加模块：

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

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

Answer 2

将您的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;

Answer 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中的指定时间。

使用ng-animate的ng-show无法正常工作

3 个答案: