javascript - Angular 1.2.x ng-hide 和 ng-show css 转换

Question

我已经阅读了有关此的各种文档和操作方法网站，但无论我做什么，我都无法显示 div 以显示 css 转换。

<div class="row reveal-animation" ng-show="partneradd.showEntitlements">
  <div class="col-md-6">
    <fieldset>
      <legend>Entitlements</legend>
      stuff
    </fieldset>
  </div>
</div>

其中 ng-show 值是一个 bool 值，可通过页面上的按钮切换为 true。这很好用。但是没有过渡。

根据在 Angular 网站上找到的一些代码，我在我的 sass 中使用了它:

.reveal-animation.ng-enter {
  -webkit-transition: 2s linear all;
   transition: 2s linear all;
   opacity: 0;
 }

.reveal-animation.ng-enter.ng-enter-active {
  opacity: 1;
}

但什么也没有。我在这里做错了什么？

编辑:我确实加载了 ng-animate 模块并将其注入(inject)到我的 app.js 中

Answer 1

希望它能帮到你，你可以像这里一样添加一个隐藏和显示的类，点击

<div class="row reveal-animation" 
ng-class="{'foo':!partneradd.showEntitlements }" ng-show="partneradd.showEntitlements">

一个简单的例子:

angular.module('myApp',[])
  .controller('ctrl', function ($scope){
    $scope.bar = false;
    $scope.clicked = function(){
       $scope.bar = !($scope.bar);
    }
  });

.myDiv{
    width:400px;
    height:200px;
    background-color:red;
   -webkit-transition: 1s linear;
    /*to only change opacity*/
    /*-webkit-transition: opacity 1s linear*/
   -moz-transition: 1s linear;
   -o-transition: 1s linear;
   transition: 1s linear;
   opacity: 1;
}

.foo{
    background-color: blue;
    opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp">
     <div ng-controller='ctrl'>
        <button ng-click='clicked()'>Click me to change class</button>  
        <div ng-class="{foo: bar}"  class='myDiv'>
        </div>
    </div>
</div>