angularjs - 如何使用 ng-show 和 AngularJS 1.3 beta 淡入和淡出 DIV 的可见性？

Question

我的代码如下所示:

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

我知道 AngularJS 中的动画发生了很多变化。当 qty 的值发生变化时，有人可以告诉我最简单的方法来显示 500 毫秒并隐藏 xxx 需要 50 毫秒。请注意，我使用的是最新的 AngularJS。

Answer 1

引用 angular-animate.js

添加 ngAnimate 作为依赖模块:

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

为您的过渡选择一个名称，例如“fade”，然后根据 documentation 中描述的命名约定定义适当的 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