Javascript 如何使用ng hide和AngularJS淡出元素？

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

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

---

您可以使用CSS和

ng animate

执行此操作，如下所示：

.fade-out.ng-hide{
不透明度：0；
}
.fade-out.ng-hide-add、.fade-out.ng-hide-remove{
过渡：全线性0.5s；
}
.检查元素{
边框：1px纯黑；
不透明度：1；
填充：10px；
}

隐藏：

选中复选框后，我将淡出。

如中所述：

覆盖.ing隐藏

默认情况下，.ng hide类将使用display:none！重要的。如果希望使用ngShow/ngHide更改隐藏行为，只需覆盖.ng hide CSS类的样式即可。请注意，需要使用的选择器实际上是.ng hide:not（.ng hide animate），以处理可以添加的额外动画类

---

添加以下类class=“animate show animate hide”

正在生成页面。。。

添加以下样式

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

.设置显示动画、.设置隐藏动画{
-webkit转换：所有线性1；
-moz跃迁：全线性1s；
-ms转换：全线性1s；
-o-过渡：全线性1s；
过渡：所有线性1；
}
.动画-show.ng-hide-remove，
.设置动画-hide.ng-hide-add.ng-hide-add-active{
不透明度：0；
显示：块！重要；
}
.设置动画-hide.ng-hide-add，
.animate-show.ng-hide-remove.ng-hide-remove-active{
不透明度：1；
显示：块！重要；

---

下面是一个plunker示例

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

正在生成页面。。。


切换
.G.G-hide{
过渡：0.5s线性所有；
不透明度：0；
}

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

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