javascript - jQuery 动画转换为 angularJS

Question

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

基本上，我通过 ajax 调用接收对象，然后使用 ng-repeat 在 View 中创建元素。元素的不透明度设置为 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 的情况下以 Angular 方式完成此操作(除非确实需要)？

Answer 1

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

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

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