老师，为什么transition设置的默认时间，直接变成了5s
来源：6-3 封装形变类（3）
穿梭时间
2019-09-02 22:39:02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
.ball {
background: linear-gradient(pink 50%, blue 50%);
width: 150px;
height: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="ball"></div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
class Transform {
constructor(selector) {
this.el = document.querySelector(selector);
this._queue=[];
this._transform={
translate:'',
scale:'',
roate:''
};
this.defaultTime=Transform.config.defaultTime;
console.log(this.defaultTime)
this.el.style.transition=`all ${this.defaultTime/1000}s`;
}
translate(value,time) {
return this._add("translate",value,time);
}
scale(value,time){
return this._add("scale",value,time);
}
rotate(value,time){
return this._add("rotate",value,time);
}
_add(type,value,time=this.defaultTime){
this._queue.push({type,value,time});
return this;
}
done(){
this._start();
}
_start(){
if(!this._queue.length)return;
setTimeout(()=>{
const info=this._queue.shift(); //[{},{},{}] 每次取第一个对象
console.log(`all ${info.time/1000}s`)
this.el.style.transform=this._getTransform(info);
this.el.style.transition = `all ${ info.time / 1000 }s`;
setTimeout(()=>{
this._start();
},info.time);
},0);
}
_getTransform({type,value,time}){
const _tsf=this._transform;
switch(type){
case 'translate':
_tsf.translate=`translate(${value})`;
break;
case 'scale':
_tsf.scale=`scale(${value})`;
break;
case 'rotate':
_tsf.rotate=`rotate(${value}deg)`;
break;
}
console.log(`${_tsf.translate} ${_tsf.scale} ${_tsf.rotate}`)
return `${_tsf.translate} ${_tsf.scale} ${_tsf.rotate}`;
}
}
Transform.config={
defaultTime:200
};
var tf = new Transform('.ball');
tf
.translate('200px,200px')
.scale(1)
.rotate(180,5000)
.done();
</script>
</body>
</html>
2回答
-
同学你好！
不是的哦，可以从打印结果看下，前面两个动画过渡时间是2s:
5s只影响到了后面你的过渡。
如果帮助到了你，欢迎采纳，祝学习愉快~
0 -
穿梭时间
提问者
2019-09-02
为什么前面2个动画的过度效果也变成了5s
0
相似问题