Question

我无法将此工作绿色摇滚动画转换为角度动画。谁能建议我怎么做？这将与角度模态向导联系在一起，所以这确实需要是一个角度动画。

我希望在html中添加一个可以被javascript使用的动画类。我不在乎它是否是addClass / removeClass，进入/离开等等。我已经尝试了几次而且我很难找到一个相当简单的解决方案。

＆＃13;

function percentToPixel(perc) {
  return ($(".stepNavContainer").outerWidth() / 100) * parseFloat(perc);
}

var cursor = document.getElementById('cursor'),
  step1 = document.getElementById('joinModalNavStep1'),
  step2 = document.getElementById('joinModalNavStep2'),
  step3 = document.getElementById('joinModalNavStep3'),
  step4 = document.getElementById('joinModalNavStep4'),
  step5 = document.getElementById('joinModalNavStep5');

TweenMax.set(cursor, {
  x: percentToPixel("0") + "px",
  xPercent: -50,
  yPercent: -50
});
TweenMax.set(step1, {
  x: percentToPixel("0") + "px",
  xPercent: -50,
  yPercent: -50
});
TweenMax.set(step2, {
  x: percentToPixel("25") + "px",
  xPercent: -50,
  yPercent: -50
});

TweenMax.set(step3, {
  x: percentToPixel("50") + "px",
  xPercent: -50,
  yPercent: -50
});

TweenMax.set(step4, {
  x: percentToPixel("75") + "px",
  xPercent: -50,
  yPercent: -50
});
TweenMax.set(step5, {
  x: percentToPixel("100") + "px",
  xPercent: -50,
  yPercent: -50
});

var tlStepNavAnimation = new TimelineMax({
  paused: true
});
tlStepNavAnimation.to(cursor, 1, {
  x: percentToPixel("0") + "px",
  xPercent: -50,
  yPercent: -50,
  ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
  x: percentToPixel("25") + "px",
  xPercent: -50,
  yPercent: -50,
  ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
  x: percentToPixel("50") + "px",
  xPercent: -50,
  yPercent: -50,
  ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
  x: percentToPixel("75") + "px",
  xPercent: -50,
  yPercent: -50,
  ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
  x: percentToPixel("100") + "px",
  xPercent: -50,
  yPercent: -50,
  ease: Back.easeInOut
});

$("#nextBtn").on("click", navigateToNextStep);
$("#previousBtn").on("click", navigateToPreviousStep);

function navigateToNextStep() {
  tlStepNavAnimation.play();
}

function navigateToPreviousStep() {
  tlStepNavAnimation.reverse();
}

＆＃13;

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;
}

＆＃13;

<html>

<head>
  <title>Title of the document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div id="previousBtn" class="btn">
    <span>Previous</span>
  </div>

  <div id="nextBtn" class="btn">
    <span>Next</span>
  </div>
  <div 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="joinModalNavStep4" class="circle step"></span>


    <span id="joinModalNavStep5" class="circle step"></span>

    <span id="cursor" class="circle"></span>

  </div>

  <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>
  <script src="script.js"></script>

</body>

</html>

＆＃13;

与Greensock的角动画

0 个答案: