0
在角動畫類使用GreenSock的JavaScript的非光滑漸變
"use strict";
angular.module("app", ['ngAnimate'])
.controller('appCtrl', function($scope, $timeout) {
$timeout(function() {
$scope.currentIndex = 0;
});
$scope.isCurrentIndex = function(index) {
return $scope.currentIndex === index;
}
$scope.setCurrentIndex = function(index) {
$scope.currentIndex = index;
}
})
.animation('.navModalCircleTransition', function() {
return {
addClass: function(element, className, done) {
if (className === 'active') {
TweenMax.set(element, {
background: "#000000"
});
TweenMax.to(element, 1, {
background: "#C32026",
onComplete: done
});
} else {
done();
}
},
removeClass: function(element, className, done) {
if (className === 'active') {
TweenMax.set(element, {
background: "#C32026"
});
TweenMax.to(element, 1, {
background: "#000000",
onComplete: done
});
} else {
done();
}
}
}
});.navModalCircleContainer {
display: flex;
justify-content: space-between;
padding: 0 25%;
}
.navModalCircle {
height: 25px;
width: 25px;
border-radius: 100%;
background: #000000;
}<div ng-app="app">
<div ng-controller="appCtrl">
<div class="navModalCircleContainer">
<div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(0)}"></div>
<div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(1)}"></div>
<div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(2)}"></div>
<div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(3)}"></div>
<div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(4)}"></div>
</div>
<br />
<button type="button" ng-click="setCurrentIndex(0)">set currentIndex = 0</button>
<br />
<br />
<button type="button" ng-click="setCurrentIndex(1)">set currentIndex = 1</button>
<br />
<br />
<button type="button" ng-click="setCurrentIndex(2)">set currentIndex = 2</button>
<br />
<br />
<button type="button" ng-click="setCurrentIndex(3)">set currentIndex = 3</button>
<br />
<br />
<button type="button" ng-click="setCurrentIndex(4)">set currentIndex = 4</button>
<br />
<br />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>我轉換不與該JavaScript使用GreenSock動畫流暢，和我試圖找出爲什麼呢？希望這個問題非常簡單，希望能夠直接回答。我正在調用navModalCircleTransition角動畫類的addClass和removeClass片斷，但Greensock渲染的過渡並不平滑。奇怪的東西。其他一切工作正常。我從來沒有見過這樣的事情。我錯過了什麼？
重複該問題可能會有所幫助。 – estus
將'background'改爲'backgroundColor'。請參閱** [this]（http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/）**。 –
@塔希爾艾哈邁德，謝謝。你說對了。如果你提供答案，我會信任你。 –