Question

我有一些jQuery代码有点过时了。我试图将其迁移到AngularJS。作为其中的一部分，我有一个看起来如下的DIV：

<div id="infoMsg" class="infoMsg"></div>

有时这个DIV是隐藏的。有时可见。一切都基于用户行为。要切换，我会使用jQuery内置的show / hide方法，如：

$("#infoMsg", "#myPage").hide();
$("#infoMsg", "#myPage").show("blind");

这里的关键部分是show（＆＃34; blind＆＃34;）组件。 "blind" effect给出了元素滑动的外观。我的问题是，我如何在AngularJS世界中做同样的事情？

目前，我的范围标记为$scope.showMessage = false。我的想法是切换它以使div可见或不可见。然而，这种方法并没有让我成为一个很好的盲人＆＃34;效果。

Answer 1

Angular在$animation模块中提供ngAnimate服务和angular-animate.js指令（您必须在angular.js之后单独包含它）。这些东西提供了通过CSS转换，CSS关键帧动画或旧学校JS超时循环/ DOM修改ala jQuery来促进动画的钩子。

我们鼓励您使用CSS，因为您可以获得更好的性能，并且更容易从标记和应用程序代码中分离和维护演示文稿。

首先是developer guide on animations，第二个是angular animate tutorial，最后是API docs for the ngAnimate module。

当您添加ngAnimate模块时，某些指令会自动挂钩到动画（例如ngShow，ngHide，ngRepeat等。默认情况下，它们只是添加类来触发CSS转换，您需要做的就是确保您有CSS类名来执行您想要的操作。

对于ngShow（或ngHide），它会添加类ng-hide，ng-hide-add，然后添加ng-hide-add-active以在隐藏时开始转换。动画完成后，它将离开ng-hide。展示后，它会移除ng-hide并添加ng-hide-remove和ng-hide-remove-active。听起来很复杂，但还不错。它非常公式化。这些状态有助于平滑过渡。

对于我在this plunk中的示例，我所做的只是在angular-module.js之后添加angular.js并在我的模块中包含ngAnimate。然后我添加了以下CSS，为选择器.fancy：

的元素制作粗略的盲目动画

.fancy {
  padding:10px;
  border:1px solid black;
  background:red;
}

.fancy.ng-hide-add, .fancy.ng-hide-remove {
  -webkit-transition:all linear 5s;
  -moz-transition:all linear 5s;
  -o-transition:all linear 5s;
  transition:all linear 5s;
  display:block!important;
}

.fancy.ng-hide-add.ng-hide-add-active,
.fancy.ng-hide-remove {
  max-height: 0;
}

.fancy.ng-hide-add,
.fancy.ng-hide-remove.ng-hide-remove-active {
  max-height:100px;
}

这种转变只是一个简单的例子。您可能希望改进它，因为max-height事情有点像黑客。考虑使用在Animate.css创建的一个。

无论如何，在CSS到位的情况下，我所做的就是正常使用ngShow，为元素提供fancy类，以便在显示和隐藏时应用正确的过渡。

从jQuery迁移到AngularJS

1 个答案: