难以使 JavaScript 动画与 AngularJS 指令一起工作

Question

function percentToPixel(perc) {
  return ($(".stepNavContainer").outerWidth() / 100) * parseFloat(perc);
}

var app = angular.module('app', ["ngAnimate"]);
app.controller("appController", function($scope) {

});

app.directive("init-modal", function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.init = function() {
        TweenMax.set($("#cursor"), {
          x: percentToPixel("0") + "px",
          xPercent: -50
        });
        TweenMax.set($("#joinModalNavStep1"), {
          x: percentToPixel("0") + "px",
          xPercent: -50
        });
        TweenMax.set($("#joinModalNavStep2"), {
          x: percentToPixel("50") + "px",
          xPercent: -50
        });
        TweenMax.set($("#joinModalNavStep3"), {
          x: percentToPixel("100") + "px",
          xPercent: -50
        });
      };
    }
  };
});



app.directive("step-modal", function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      var tlStepNavAnimation = new TimelineMax();
      tlStepNavAnimation.to(cursor, 1, {
        x: percentToPixel("0") + "px",
        xPercent: -50,
        ease: Back.easeInOut
      });
      tlStepNavAnimation.addPause();
      tlStepNavAnimation.to(cursor, 1, {
        x: percentToPixel("50") + "px",
        xPercent: -50,
        ease: Back.easeInOut
      });
      tlStepNavAnimation.addPause();
      tlStepNavAnimation.to(cursor, 1, {
        x: percentToPixel("100") + "px",
        xPercent: -50,
        ease: Back.easeInOut
      });

      scope.play = function() {
        tlStepNavAnimation.play();
      };

      scope.reverse = function() {
        tlStepNavAnimation.reverse();
      };
    }
  };
});

html,
body {
  overflow: hidden;
}
body {
  background-color: white;
  margin: 0;
  padding: 0;
}
.stepNavContainer {
  position: relative;
  height: 50px;
  width: 50%;
  left: 25%;
  border: 1px solid red;
}
.circle {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
#cursor {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: #c32026;
  border-radius: 50%;
}
.step {
  background: #999999;
}
.btn {
  width: 100px;
  height: 50px;
  border: 1px solid black;
}

<!DOCTYPE html>
<html ng-app="app" ng-controller="appController">

<head>
  <title>Title of the document</title>
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div init-modal ng-click="init()" id="setupBtn" class="btn">
    <span>Setup</span>
  </div>

  <div step-modal ng-click="reverse()" id="previousBtn" class="btn">
    <span>Previous</span>
  </div>

  <div id="nextBtn" class="btn">
    <span step-modal ng-click="play()">Next</span>
  </div>
  <div init-modal class="stepNavContainer">


    <span id="joinModalNavStep1" class="circle step"></span>


    <span id="joinModalNavStep2" class="circle step"></span>


    <span id="joinModalNavStep3" class="circle step"></span>

    <span id="cursor" class="circle"></span>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
</body>

</html>

所以，我有一个有效的 JavaScript 动画 (Greensock)，您可以在这里看到 http://codepen.io/jstafford/pen/VaLgvK。我正在尝试将其插入到 AngularJS 指令中，但我什至没有将其放入 Setup（init-modal 指令）或 Next 和 Previous（step-modal 指令）按钮的指令中。 1) 按下 Setup 按钮将三个圆圈和光标设置在它们的初始位置，这将触发 init-modal 指令 2) 然后按下 Next 按钮或 Previoius 按钮触发 step-modal 指令以导致步进动画发生。我是 AngularJS 的新手，我正在尝试以 AngularJS 的方式来做这件事，但真的很挣扎。非常感谢任何帮助。

Answer 1

首先，给你的指令起一个驼峰命名：

app.directive("initModal", function() {
  return {
    restrict: 'E',
    link: function(){}
  }
}

限制：'E' => 元素：<init-modal></init-modal>

限制：'A' => 属性：<div init-modal></div>

限制：'C' => 类名：<div class="init-modal"></div>

Angular's directive documentation

难以使 JavaScript 动画与 AngularJS 指令一起工作

Difficulty getting JavaScript animation to work with AngularJS Directive

angularjs

angularjs-directive

ng-animate