0
私のアニメーションクラスはこのコードブックではトリガーされていません。私は何が欠けていますか？私はコントローラーメソッドにうまくいく。私はアニメーションクラスの中に入れない、addClassかremoveClassのどちらか？removeClassまたはaddClassのangularjsアニメーションクラスブレークポイントに到達しない
codepen angularjs animation link, same code as here
これは、私が上記のアニメーションクラスに組み込むしようとしています私のベースのアニメーションです。
codepen base animation link, works fine, not the issue
方法これは、各サークルをクリックすることで、あなたはそれをアクティブにする、セットアップです。アクティブサークルを最初のものに初期化します。このタイムラインは、バナースライドが「アクティブ」のときにストロークを持つ空の円に移動し、アクティブでないときは、タイムラインはストロークなしのベタの塗りに戻ります。
angular.module("appBanner", [])
.controller('bannerCtrl', function($scope) {
$scope.slides = ["zero", "one", "two"];
$scope.currentIndex = 0;
$scope.currentSlideIndex = "zero";
$scope.setCurrentSlideIndex = function(index) {
$scope.currentIndex = index;
$scope.currentSlideIndex = $scope.slides[$scope.currentIndex];
}
$scope.isCurrentSlideIndex = function(slideIndex) {
return $scope.currentSlideIndex === slideIndex;
}
})
.animation('.navCircleTransition', function($window) {
return {
addClass: function(element, className, done) {
if (className === 'active') {
var svgEl = element.find("svg");
navCircleAnimate(svgEl, "reverse");
} else {
done();
}
},
removeClass: function(element, className, done) {
var scope = element.scope();
if (className === 'active') {
var svgEl = element.find("svg");
navCircleAnimate(svgEl, "reverse");
} else {
done();
}
}
}
});
function navCircleAnimate(el, direction) {
var tlNavCircle = new TimelineMax({
paused: true
});
tlNavCircle.set($(el), {
drawSVG: "0% 100%",
ease: Linear.easeInOut
});
tlNavCircle.to($(el), 1, {
drawSVG: "0% 0%",
fill: "none",
ease: Linear.easeInOut
});
if (direction === "play") tlNavCircle.play();
else tlNavCircle.reverse();
}.navCircleContainer {
position: absolute;
display: flex;
justify-content: space-between;
padding: 5px;
bottom: 2.5px;
left: 12.5%;
width: 75%;
}
body {
background: #333;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div ng-app="appBanner" ng-controller="bannerCtrl" class="navCircleContainer">
<div id="autoNavCircle" class="navCircleTransition" ng-class="{active: isCurrentSlideIndex('auto')}" ng-click="setCurrentSlideIndex(0)">
<svg id="circle" height="100" width="100">
<circle cx="50" cy="50" r="45"/>
</svg>
</div>
<div id="autoNavCircle" class="navCircleTransition" ng-class="{active: isCurrentSlideIndex('boatowners')}" ng-click="setCurrentSlideIndex(1)">
<svg id="circle" height="100" width="100">
<circle cx="50" cy="50" r="45"/>
</svg>
</div>
<div id="autoNavCircle" class="navCircleTransition" ng-class="{active: isCurrentSlideIndex('commercial')}" ng-click="setCurrentSlideIndex(2)">
<svg id="circle" height="100" width="100">
<circle cx="50" cy="50" r="45"/>
</svg>
</div>
</div>