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）按“设置”按钮将三个圆圈和光标设置在其初始位置，触发init-modal指令2）然后按下“下一步”按钮或“Previoius”按钮将触发步进模式指令，以使步骤动画发生。我是AngularJS的新手，我试图以AngularJS的方式做到这一点，但真的很挣扎。非常感谢任何帮助。

Answer 1

首先，给你的指令一个驼峰案例名称：

@EnumMapping(nameValuePairs="Z=Z, C=C, D=D")
public enum MyEnum{
//
Z("Z"),
C("C"),
D("D");

   private String description = "";
   //
    MyEnum(String description){
        this.description = description;
     }

    public String toString(){
        return description;
    }
}

限制：'E'=＆gt;元素：app.directive("initModal", function() { return { restrict: 'E', link: function(){} } }

限制：'A'=＆gt;属性：<init-modal></init-modal>

限制：'C'=＆gt;班级名称：<div init-modal></div>

Angular's directive documentation

难以让JavaScript动画与AngularJS指令一起使用

1 个答案: