Javascript 如何为使用GSAP TweenMax创建一个超级简单的AngularJS指令？

我希望在我的AngularJS项目中使用TweenMax动画，而不是仅仅在控制器中编写代码，我希望以正确的方式执行，并通过指令使用它

以下是我的要点：

<ul>
  <li class="foo">A</li>
  <li class="foo">B</li>
  <li class="foo">C</li>
</ul>

---

如何将其包装成一个指令？

您可以在包装器元素上使用如下指令，即

元素.children（）

，它将通过将每个DOM排队来应用该效果

标记

<ul tween-max-stragger>
    <li class="foo">A</li>
    <li class="foo">B</li>
    <li class="foo">C</li>
</ul>

---

如果您没有在列表中使用

ng repeat

，您可以这样做

angular.module('myApp')
  .directive('fancyList', function() {
    return {
      restrict: 'C',
      link: function(scope, elem, attrs) {
        TweenMax.staggerFrom(elem.find('li'), 1.5, {
          scale: 0.7,
          opacity: 0,
          delay: 0.5,
          ease: Elastic.easeOut
        }, 0.1);
      }
    };
  })

然后像这样编写html：

<ul class="fancy-list">
  <li>A</li>
  <li>B</li>
</ul>

A
B

---

您不能对每个

元素都编写指令，因为它们都依赖于上一个动画。下一个最好的方法是为父元素编写一个指令，用于包装所有交错的动画。

是否要使用

ng repeat

来渲染它们？不，我更希望在父元素（The

）上使用该指令，因为在我的项目中，不能使用ng repeat使子元素真正成为动态的。

element.find（'li.foo'））

谢谢@PankajParkar！这太棒了。如果我想让“element.find（'li'）”部分动态化，这样我也可以在其他元素上使用它，我该怎么做？@krizta查看更新。。您可以使用

element.children（）

让内部元素动态加载来了解这一点。。谢谢：）

angular.module('myApp')
  .directive('fancyList', function() {
    return {
      restrict: 'C',
      link: function(scope, elem, attrs) {
        TweenMax.staggerFrom(elem.find('li'), 1.5, {
          scale: 0.7,
          opacity: 0,
          delay: 0.5,
          ease: Elastic.easeOut
        }, 0.1);
      }
    };
  })

<ul class="fancy-list">
  <li>A</li>
  <li>B</li>
</ul>