如何使用Ang-Show 1.3 beta版的ng-show淡入和淡出DIV的可见性？

Question

我的代码看起来像这样:

<div class="block-border"
     data-ng-show="qty > 0">
   xxx
</div>

我知道AngularJS中的动画有很多变化.有人能告诉我最简单的方法是让它显示500ms显示,并在数值变化时隐藏xxx 50ms.请注意,我使用的是最新的AngularJS.

Answer 1

• 参考angular-animate.js

• 将ngAnimate添加为依赖模块:

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

• 选择转换的名称,例如'fade',然后根据文档中描述的命名约定定义适当的CSS类:

  .fade.ng-hide {
    opacity: 0;
  }
  
  .fade.ng-hide-remove,
  .fade.ng-hide-add {
    display: block !important; /* or inline-block, as appropriate */
  }
  
  .fade.ng-hide-remove {
    transition: all linear 1000ms;
  }
  
  .fade.ng-hide-add {
    transition: all linear 500ms;
  }
  

• 将类添加到元素:

  <div class="block-border fade" ng-show="qty > 0">
  

演示: http ://plnkr.co/edit/HWi0FfDOsHeSOkcrRtN2？p =preview

Answer 2

我无法得到已接受的工作答案,但以下工作(主要来自这个ng-nuggets帖子):

.fade {
    transition: all linear 500ms;
    opacity: 1;
}

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

然后我想要淡入淡出的HTML元素看起来像这样:

<span data-ng-show="copyLinkClicked" class="fade">some text here</span>

正如@MichaelNguyen所提到的,Bootstrap似乎确实已经调用了一个样式fade,我们在我们的应用程序中使用了Bootstrap,但上述样式仍然有效.如果已经有一个已命名的样式fade,则在使用上述代码之前将名称更改为唯一的名称.