Javascript 将jQuery动画转换为angularJS

我目前正在用angularJS开发一个应用程序，我对它有点陌生。不久前，我在jQuery中创建了一个基本的动画函数，现在我正试图以“angularJS方式”实现它。不知道如何做到这一点，以及最佳做法是什么

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

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

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

通过扩展jQuery轻松实现“easeOut”：

在JSFIDLE中提供了代码，以便您可以看到它是如何工作的：

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

---

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

您所提供的非常好，您应该保持这种方式。 阅读此链接，您将更好地理解AngularJS和JQuery

简而言之，Angular在使用数据绑定创建元素的范围内最擅长DOM操作。对于纯CSS无法完成的动画和风格变化，JQuery最适合DOM操作

---

至于确保Jquery函数在

ng repeat

完成之前不会被调用，请看：

谢谢您提供的信息，我会调查一下。是的，函数本身也会相应地工作，只是当我把angular代码放进去时，我遇到了一些问题，比如jQuery试图在ng repeat渲染元素之前运行。他们似乎“合作”得不太好。代码在我的控制器中，它与route和ng view链接。我编辑了我的答案，以包含您对在DOM加载

ng repeat

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;
  }
});