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']);

为您的转换选择一个名称，例如＆＃39; fade＆＃39;，然后根据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

Answer 2

我无法得到已接受的工作答案，但以下工作（主要来自this ng-nuggets post）：

.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的样式，请在使用上述代码之前将名称更改为唯一的名称。

Answer 3

如果你想淡入使用ng-if，因为布尔角度在这里有一些很好的文档https://docs.angularjs.org/api/ngAnimate。我使用ng-if作为我的褪色目的，下面是一个例子：

form.html

SELECT F.ITEM_NUM, S.ITEM_NUM, F.DESCRIPTION, S.DESCRIPTION, F.CATEGORY, S.CATEGORY
FROM ITEM F, ITEM S
WHERE F.CATEGORY = S.CATEGORY
AND F.ITEM_NUM < S.ITEM_NUM
ORDER BY F.ITEM_NUM, S.ITEM_NUM;`

form.css

<form name="exampleForm" ng-submit="submit()">
  <input type="email" placeholder="Email Address" ng-model="email" required>
  <input type="text" placeholder="Name" ng-model="name" required>
  <input class="invalid-btn" ng-if="exampleForm.$invalid" type="submit" value="Invalid" />
  <input class="valid-btn" ng-if="exampleForm.$valid" type="submit" value="Valid">
</form>

这种方式的工作方式是，如果你想淡入一个具有不同颜色或文字和不同文字颜色的按钮，你可以在填写表格并且有效时淡入按钮，无效按钮将淡出，只留下一个按钮取决于表单的状态。有点黑客，但它的工作和看起来很顺利。我不得不使用/* css for button that will show when form is invalid */ .invalid-btn { border: 1px solid #222; width: 100px; height: 50px; color: #222; background: #fff; } .invalid-btn.ng-enter { opacity: 1; } /* The finishing CSS styles for the enter animation */ .invalid-btn.ng-enter.ng-enter-active { opacity: 0; } .valid-btn { width: 100px; height: 50px; background: #F26623; color: #fff; } /* The starting CSS styles for the enter animation */ .valid-btn.ng-enter { transition:0.5s linear all; opacity: 0; } .valid-btn.ng-enter-stagger { /* this will have a 100ms delay between each successive leave animation */ transition-delay: 0.3s; /* As of 1.4.4, this must always be set: it signals ngAnimate to not accidentally inherit a delay property from another CSS class */ transition-duration: 0s; } /* The finishing CSS styles for the enter animation */ .valid-btn.ng-enter.ng-enter-active { width: 100px; height: 50px; background: #F26623; color: #fff; opacity:1; }设置延迟，因为同时加载动画会导致按钮闪烁和跳跃而不能平滑地制作动画。因此，在这种情况下，我们先让无效按钮隐藏，然后在表单有效且所有输入字段都已正确填写时加载有效按钮。

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

3 个答案: