0
難度越來越JavaScript動畫與AngularJS指令工作
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指令中，但我甚至沒有在安裝程序（init-modal指令）或Next和Previous（step-modal指令）按鈕的指令內進行。 1）按下Setup按鈕，將三個圓和光標設置在觸發init-modal指令的初始位置。2）然後按下Next按鈕或Previoius按鈕，觸發step-modal指令，使step動畫發生。我是AngularJS的新手，我正在嘗試使用AngularJS的方式，但真的很掙扎。任何幫助不勝感激。
非常感謝！駱駝案件和限制「A」是我需要它的工作。我很感激。 –