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

Question

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

这是我的元素：

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

这是我的动画：

var ease = Elastic.easeOut;

TweenMax.staggerFrom(".foo", 1.5, {
  scale: 0.7,
  opacity: 0,
  delay: 0.5,
  ease: ease
}, 0.1);

如何将其包装在指令中？

Answer 1

您可以像下面这样在包装器元素上设置指令，这将有 element.children()，它将通过排队对每个 DOM 应用该效果。

标记

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

指令

.directive('tweenMaxStragger', function() {
    return function(scope, element, attrs) {
      var ease = Elastic.easeOut;
      TweenMax.staggerFrom(element.children(), 1.5, {
        scale: 0.7,
        opacity: 0,
        delay: 0.5,
        ease: ease
      }, 0.1);
    }
})

Codepen

Answer 2

如果您没有在列表中使用 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>

您不能真正为每个 <li> 元素编写指令，因为它们都依赖于之前的动画。下一个最好的办法是为包装所有交错动画的父元素编写一个指令。

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

How to create a super simple AngularJS directive for using GSAP TweenMax?

javascript

angularjs

angularjs-directive

gsap