Angular 1.2.x ng隐藏和ng显示css转换

Angular 1.2.x ng-hide and ng-show css transition

本文关键字：ng 显示 css 转换 隐藏 Angular      更新时间：2024-03-20

我已经阅读了关于这方面的各种文档和操作指南网站，但无论我做什么，我都无法获得显示css转换的div。

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

其中ng显示值是一个布尔值，通过页面上的按钮切换为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模块，并将其注入到我的app.js 中

希望它能帮助你，你可以在点击时在隐藏和显示上添加一个类

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

ng-show正在使用ng-hide类（查看此处以获取更多信息和支持的类）：

.reveal-animation {
  -webkit-transition: 1s all linear;
   transition:all linear 1s;
   opacity:1;
 }
.reveal-animation.ng-hide {
  opacity: 0;
}
相关文章：