如何使用 ng-hide 和 AngularJS 淡出元素？答案

【问题标题】：How to fade out element using ng-hide with AngularJS?如何使用 ng-hide 和 AngularJS 淡出元素？
【发布时间】：2017-08-13 04:25:40
【问题描述】：

我目前可以根据控制器中的布尔条件显示/隐藏元素。如果条件为真而不是立即隐藏它，我该如何淡出元素？

<div id='conversion-image' ng-hide="pages.length > 0">
    generating pages...
    <br />
    <img src='Images/ajax-loader-blue.gif' />
</div>

我也已经包含了 ngAnimate 依赖项。

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

【问题讨论】：

标签： javascript angularjs css-animations ng-hide

【解决方案1】：

您可以使用 CSS 和 ng-animate 来实现，如下所示：

.fade-out.ng-hide {
  opacity: 0;
}

.fade-out.ng-hide-add, .fade-out.ng-hide-remove {
  transition: all linear 0.5s;
}

.check-element {
  border: 1px solid black;
  opacity: 1;
  padding: 10px;
}

<head>
  <meta charset="UTF-8">
  <link href="animations.css" rel="stylesheet" type="text/css">
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-animate.js"></script>      
</head>

<body ng-app="ngAnimate">
  Hide: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br />
  <div class="check-element fade-out" ng-hide="checked">
    I fade out when your checkbox is checked.
  </div>
</body>

Angular ng-hide docs

【讨论】：

【解决方案2】：

只需在您的 div 中使用淡入淡出类并添加一个按钮来切换您的条件以查看隐藏动画。您可以在 ng-hide = "your_own_condition" 中使用自己的条件

<div id='conversion-image' class="fade" ng-hide="condition">
    generating pages...
    <br />
    <img src='Images/ajax-loader-blue.gif' />
</div>

<button ng-click="condition=!condition">Toggle</button>

<style>
.fade.ng-hide {
  transition:0.5s linear all;
  opacity:0;
}
</style>

【讨论】：

【解决方案3】：

添加以下类class="animate-show animate-hide"

<div id='conversion-image' class="animate-show animate-hide" ng-
   hide="model.transaction.selectedDocument.pages.length > 0">
     generating pages...
    <br />
   <img src='Images/ajax-loader-blue.gif' />
</div>

添加以下样式

<style>
    .animate-show,.animate-hide {
       -webkit-transition:all linear 1s;
       -moz-transition:all linear 1s;
       -ms-transition:all linear 1s;
       -o-transition:all linear 1s;
       transition:all linear 1s;
  }

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

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

</style>

这是一个笨拙的例子http://plnkr.co/edit/VoWwmHK57wtuyGl6npr0?p=preview

【讨论】：

【解决方案4】：

如AngularJS documentation中提到的：

覆盖 .ng-hide

默认情况下，.ng-hide 类将使用 display: none !important 设置元素的样式。如果您希望使用 ngShow/ngHide 更改隐藏行为，您可以简单地覆盖 .ng-hide CSS 类的样式。注意需要用到的选择器其实是 .ng-hide:not(.ng-hide-animate) 来应对可以添加的额外动画类。

【讨论】：