从jQuery迁移到AngularJS

Question

我有一些有点过时的jQuery代码。我正在尝试将它迁移到AngularJS。作为其中的一部分，我有一个如下所示的DIV：

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

有时这个DIV是隐藏的。有时它是可见的。其全部基于用户行为。要切换，我会使用jQuery的内置显示/隐藏方法，如这样的：

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

这里的关键部分是节目（“盲”）的组成部分。 "blind" effect给出了滑动元素类型的外观。我的问题是，我如何在AngularJS世界中做同样类型的事情？

目前，我在我的范围内定义了一个标志$scope.showMessage = false。我的想法是切换，以使div可见或不可见。但是，这种方法并没有给我带来好的“盲目”效果。

Answer 1

Angular在angular-animate.js模块中提供$animation服务和ngAnimate指令（您必须在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.js后angular-module.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类，所以当显示和隐藏时应用正确的转换。