jQuery 动画到 angularJS答案

【问题标题】：jQuery animation into angularJSjQuery 动画到 angularJS
【发布时间】：2016-03-31 22:49:44
【问题描述】：

我目前正在使用 angularJS 开发一个应用程序，我对它有点陌生。不久前我在 jQuery 中制作了一个基本的动画功能，我现在正试图以“angularJS 方式”来实现。不确定如何执行此操作，以及最佳做法是什么。

基本上，我通过 ajax 调用接收对象，然后使用 ng-repeat 在视图中创建元素。元素的不透明度设置为 0，我通过动画将其更改为 1。

jQuery 中的动画函数如下所示：

$(".box").each(function(i) {
  $(this).delay(i * 150).animate({
    'opacity': '1'
  }, 2000, 'easeOut');
});

使用扩展的 jQuery 缓动“easeOut”：

jQuery.extend(jQuery.easing, {
  easeOut: function(x, t, b, c, d) {
    return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
  }
});

在 jsfiddle 中提供了代码，以便您了解它是如何工作的：https://jsfiddle.net/o944mLsg/1/

我尝试通过使用“angular.element”将代码包含在 angularJS 中，但随后它在 angular 实际创建 DOM 之前加载，因此动画没有效果。然后我将它包裹在一个 setTimeout 函数中，然后它大部分时间都可以工作，但有时由于某种原因它不会......只是不太可靠。

所以问题是，如何在没有 jQuery 的情况下以有角度的方式完成（除非它真的需要）？

【问题讨论】：

【解决方案1】：

您提供的内容效果很好，您应该保持这种状态。阅读此链接，What does AngularJS do better than jQuery?，您将对 AngularJS 和 JQuery 有更好的了解。

简而言之，Angular 最擅长 DOM 操作，以创建具有数据绑定的元素。对于纯 CSS 无法完成的动画和样式更改范围，JQuery 最适合 DOM 操作。

至于确保在ng-repeat 完成之前不会调用您的 Jquery 函数，请查看：ng-repeat finish event

【讨论】：

感谢您的信息，我会调查的。是的，函数本身相应地工作，只是当我放入我的角度代码时，我遇到了像 jQuery 这样的问题，试图在 ng-repeat 渲染元素之前运行。他们似乎并没有很好地“合作”。代码在我的控制器中，与路由和 ng-view 链接。
我已经编辑了我的答案，包括您对在加载 DOM 之前运行 jquery 的担忧ng-repeat