发新贴  快速回复

《3D圆球、3D圆锥、3D柱状、3D柱状扭曲课程》里面的制作全部图形的切换示例时,出现问题问题,想请教

  lisa2544
2017-11-11 17:14

当点击第二个按钮时,会出现下面的情况:即最后三个字突然出现,没有渐变出来;想问一下是什么原因,谢谢~

附件下载:
 
2017年2月8日

找到你代码里面的这个函数changeCone(); 然后这个函数的里面有这么个for循环 for(var i=0;i<=coneNum;i++){......} 请你把这个for循环改成下面那样,就可以了。

我个人解释一下:(只是我的观点,不一定对) 就是你给每个ali加transition,但是transition这个玩意解析需要时间,还没有解析完成,后面的代码就执行了,导致有的li无法加上过渡transition,故直接出来。

我的解决方案就是延时器,我们可以用个延时器来阻止一下代码运行,等transition好了在执行相应的代码,至于transition什么时候解析好,我不得而知,但是浏览器一般很快,加个50ms延时意思意思就行了,不可能解析个代码要很长时间吧,如果是这样,这transition废了,那还不如直接用js里面的运动呢。

for(var i=0;i<=coneNum;i++){
	ali[i].style.display='block';
	ali[i].className='one';
	setTimeout(function(i){
		ali[i].style.opacity = 1;
		ali[i].style.transform='translate3D('+ali[i].coneX+'px,'+ali[i].coneY+'px,'+ali[i].coneZ+'px) rotateY('+ali[i].conePhi+'rad) rotateX('+ali[i].coneTheta+'rad)';
	},50,i);
	if(i==253){
		console.log(ali[i].coneX,ali[i].coneY,ali[i].coneZ);
	}
}

 

 

2017-11-11 22:52  回复本帖
 
lisa2544

非常感谢帮忙解决了这个问题,现在已经好了, 谢谢了~~

2017-11-13 11:37  回复本帖
登录 后才可以发表回复