javascript - 递增/递减变换旋转不起作用 fiddle jquery

Question

我正在制作这个饼图...

任何时候我点击红色...圆形绝对定位的红色 div 旋转一个小于 180 度的 Angular 以根据投票数完成另一半...制作饼图模拟这个颜色对应红色投票的百分比。

问题

当我点击红色按钮时，红色 div 会正确旋转，但是当我点击 bue 时......它不会......

我目前正在测试红色尺寸....所以我想在红色 sslice 占总尺寸的 50% 或更大(直到 100%)时进行这项工作，一旦效果良好，它就会添加了一个蓝色定位的 div 使蓝色的一面相同...

我做错了什么？

var red=0;
var blue=0;
var Psum = (red+blue);
var r_rotation = 0;
var red_rotacion_control= 0;
$(".VoteMain").on("click",function(){	


if($(this).hasClass("VoteRed")){
	red++;
	Psum = (red+blue);
	red_size_control = "increase_red";
	
}
 if($(this).hasClass("VoteBlue")){	
	blue++; 
		Psum = (red+blue);
	red_size_control = "decrease_red";
}



var red_percentage= Math.floor((red/Psum)*100); 
var blue_percentage= 100-red_percentage;

///old +- new angles?
var sum_rotacion =  (1/(Psum-1) + 1/Psum)*360;
var rest_rotacion =  (1/(Psum-1) - 1/Psum)*360;


//display percentages
    $(".VoteRed span").text(red_percentage+"% :" +red+" votes > Votos Totales "+Psum);
    $(".VoteBlue span").text(blue_percentage+"% :"+blue);

	//rotate pieChart
if(red> blue){
//red mayor	
$(".red").css('z-index', 3000);	
$(".blue").css('z-index', 1);

if(red==Psum){
$(".red").rotate(180);	
}else{


if(red_size_control=="increase_red"){
	r_rotacion=(180-sum_rotacion);
	}else if(red_size_control=="decrease_red"){
		r_rotacion=(180-rest_rotacion);
		}



$(".red").rotate(r_rotacion);
}
	
}
	

	
});



//function
jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

.pie_container{
	
	margin:40px;

	
}
.pie{
	position:relative;
	height:100px;
	width:100px;
	qbackground:yellow;
	border-radius:50%;
	background-image:linear-gradient(to right, blue 50%, red 0);
	  transform-origin: 50% 50%;
	
}
.blue{
	position:absolute;
	top:0;
	left:0;
	
	height:100px;
	width:50px;
	background:blue;
qborder:1px solid green;
	border-top-left-radius: 50px;
border-bottom-left-radius: 50px;

  transform-origin: 100% 50%;
transform: rotate(0deg);
}
.red{
	position:absolute;
	top:0;
	right:0;
	
	height:100px;
	width:50px;
	background:red;
border:1px solid yellow;
	border-top-right-radius: 50px;
border-bottom-right-radius: 50px;

  transform-origin: 0% 50%;
transform: rotate(0deg);

transition:all 1s ease-out;
}
.red span{
	position:absolute;
	bottom:0;
	left:20px;
}

.VoteMain{cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="pie_container">

<div class="pie">
<div class="red"><span>b</span></div>
</div>

<div class="PollVoteMain">
<div class="VoteMain VoteBlue"><button>blue</button> <span>0</span></div>
<div class="VoteMain VoteRed"><button>red</button> <span>0</span></div>

</div>


</div>

Answer 1

您必须将整个旋转计算部分更改为:

r_rotacion = (red_percentage / 100) * 360 - 180;
$(".red").rotate(r_rotacion);

旋转是绝对的，不相对于之前的状态

这是一个有效的 jsfiddle