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值是一个布尔值，通过页面上的按钮切换为true。这很好用。但没有过渡。

在角网站上找到一些代码后，我在我的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模块并将其注入我的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>

Answer 2

ng-show正在使用ng-hide课程（请查看here了解更多信息和支持的课程）：

.reveal-animation {
  -webkit-transition: 1s all linear;
   transition:all linear 1s;
   opacity:1;
 }

.reveal-animation.ng-hide {
  opacity: 0;
}

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

2 个答案: