0
Nicht glatt tweening von Greensock JavaScript in Angular-Animation Klasse
"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>Meine Übergänge sind nicht mit diesem Javascript Greensock Animation glatt, und ich versuche, herauszufinden, warum? Sehr reduziertes Problem hier mit hoffentlich einfacher Antwort. Ich rufe die addClass- und removeClass-Teile der angularen Animationsklasse navModalCircleTransition auf, aber der von Greensock gerenderte Übergang ist nicht glatt. Seltsames Zeug. Alles andere funktioniert gut. So etwas habe ich noch nie gesehen. Was vermisse ich?
Ein Plünderer/Geige, um das Problem zu replizieren, kann helfen. – estus
Ändern Sie den Hintergrund in 'backgroundColor'. siehe ** [this] (http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/) **. –
@Tahir Ahmed, danke. Du hast es. Wenn Sie eine Antwort liefern, werde ich Ihnen gutschreiben. –