从jQuery的迁移到AngularJS [英] Migrating from jQuery to AngularJS

问题描述

我有一些jQuery code，这是一个有点过时。我试图将其迁移到AngularJS。作为其中的一部分，我有一个DIV，看起来像以下内容：

I have some jQuery code that's a bit dated. I'm trying to migrate it to AngularJS. As part of that, I have a DIV that looks like the following:

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

有时这DIV是隐藏的。有时它是可见的。所有基于用户操作。要切换，我会使用jQuery的内置显示/隐藏方法，比如这样的：

Sometimes this DIV is hidden. Sometimes its visible. Its all based on user action. To toggle, I would use jQuery's built in show/hide methods like such:

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

这里的关键部分是显示（盲）组成。该盲的效果给人一种元素在滑动的出现。我的问题是，我怎么能做到这一点同类型的事情在世界AngularJS？

The key piece here is the show("blind") component. The "blind" effect gives the appearance of the element kind of sliding in. My question is, how can I do this same type of thing in the AngularJS world?

目前，我已经定义为 $ scope.showMessage = FALSE 在我的范围的标志。我的想法是切换，为了使股利可见或不可见。然而，这种做法没有得到我的漂亮的盲目的效果。

Currently, I have a flag on my scope defined as $scope.showMessage = false. My idea was to toggle that to make the div visible or not. However, that approach doesn't get me the nice "blind" effect.

推荐答案

角度提供了一个 $动画服务和 ngAnimate 指令在角animate.js 模块（你必须单独包括它之后， angular.js ）。这些东西提供有利于动画既可以通过CSS转换，CSS关键帧动画，或老同学JS超时循环/ DOM修改阿拉jQuery的。

Angular provides a $animation service and ngAnimate directive in the angular-animate.js module (you have to include it separately, after angular.js). These things provide hooks that facilitate animations either through CSS transitions, CSS keyframe animations, or old school JS timeout loops/DOM modification ala jQuery.

您正在鼓励使用CSS，因为你获得更好的性能和更容易的分离，标记和应用code维持presentation。

You're encouraged to use CSS, as you get better performance and it is easier to separate and maintain presentation from markup and application code.

首先，在动画的开发者指南，其次，<一个href=\"http://odeto$c$c.com/blogs/scott/archive/2014/02/25/easy-animations-for-angularjs-with-animate-css.aspx\"相对=nofollow>角动画教程，最后，为<$ C $ API文档C> ngAnimate 模块。

First, the developer guide on animations, second, an angular animate tutorial, and lastly, API docs for the ngAnimate module.

在包括 ngAnimate 模块，某些指令会自动挂接到动画（如 ngShow ， ngHide ， ngRepeat 等）。默认情况下，他们只需添加类引发的CSS转换和所有你需要做的是确保你有CSS类名，做你想做的。

When you include the ngAnimate module, certain directives will automatically hook into animate (such as ngShow, ngHide, ngRepeat, etc.). By default, they simply add classes to trigger CSS transitions and all you need to do is make sure you have CSS class names to do what you want.

在 ngShow 的情况下（或 ngHide ），它将增加类 NG-隐藏， NG-捉迷藏添加，然后 NG-捉迷藏添加活性开始隐藏时过渡。当动画完成，它会见好就收 NG-隐藏。当你展示，它会删除 NG-隐藏并添加 NG-捉迷藏删除和 NG-捉迷藏删除主动。听起来很复杂，但它不坏。这是pretty公式化。这些状态是存在，以便顺利过渡。

In the case of ngShow (or ngHide), it will add the classes ng-hide, ng-hide-add, and then ng-hide-add-active to start transitioning when hiding. When the animation completes, it'll just leave ng-hide. When you show, it'll remove ng-hide and add ng-hide-remove and ng-hide-remove-active. Sounds complicated, but it's not bad. It's pretty formulaic. These states are there to facilitate smooth transitions.

有关我的这普拉克的，我所做的就是包括角module.js 在 angular.js ，包括 ngAnimate 在我的模块。然后，我添加以下CSS使粗盲人般的动画与选择 .fancy 元素：

For my example in this plunk, all I did was include angular-module.js after angular.js and include ngAnimate in my module. Then I added the following CSS to make a crude blind-like animation for elements with the selector .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;
}

这过渡仅仅是一个简单的例子。你可能会想改善它，因为最大高度的事情是一个黑客位的。考虑使用一个给你创造了在 Animate.css 。

This transition is just a simple example. You'll probably want improve on it, as the max-height thing is a bit of a hack. Consider using one created for you over at Animate.css.

不管怎样，用CSS很到位，我所要做的就是使用 ngShow 一般，给人的元素看中类，所以当它显示，右边的转换应用皮张。

Anyways, with the CSS is in place, all I do is use ngShow normally, giving the element the fancy class so the right transitions are applied when it shows and hides.

这篇关于从jQuery的迁移到AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！