运动函数是我们自己封装的一个函数。
作用是将css样式的改变不是一次性完成 是 逐步完成 执行效果 看上去 像是 动画/运动 完成的css样式改变。
实际项目中框架等都有自己的运动函数我们目前封装一个简单的兼容多属性的运动函数。
运动函数部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: rgb(231, 12, 48);
margin: 0 auto;
opacity: 0.3;
/* transition: 3s; */
}
p {
width: 100px;
height: 100px;
background: black;
position: fixed;
top: 200px;
left: 50px;
}
</style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
var oDiv = document.querySelector('div');
var oBtn = document.querySelector('button');
var oP = document.querySelector('p')
oBtn.addEventListener('click',function(){
move(oDiv,{width:1800,height:900,opacity:1} , function(){ oDiv.style.background = 'black' } );
})
// 运动函数命名
// move 运动函数
// @param object element 要执行运动函数的标签对象
// @param object object 要执行运动的css属性 和 最终数值
// @param function callback 运动结束执行的回调函数
// 默认值是空函数
function move(element, object, callback = function () { }) {
// 定义变量存储定时器个数
let num = 0;
// 循环遍历参数二(object)
// 使用 for...in 循环 使用 let 定义变量
for (let type in object){
// type 是 参数2对象的属性 也就是 要运动的css样式的属性
// object[type] 是 参数2对象的属性值 也就是 要运动的css样式的 最终数值
// 定时器数量加一
num++;
// 开始数值，也就是获取的原始数值，兼容透明度写法
let startVal = (type === 'opacity') ? window.getComputedStyle(element)[type] * 100 : parseInt(window.getComputedStyle(element)[type]);
// 结束数值，也就是输入的属性对应的属性值，兼容透明度写法
let endVal = (type === 'opacity') ? object[type] * 100 : object[type];
// 定时器开始，time记录定时器编号
let time = setInterval( function () {
// 设定步长值= 结束数值 - 开始数值 / 10
let step = (endVal - startVal) / 10;
// 如果步长值大于0 就向上取整，反之则向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 将初始值 += 步长值 再把新值赋值给初始值
startVal += step;
// 将新的步长值 赋值给 标签对象的css样式 兼容 透明度
element.style[type] = (type === 'opacity') ? startVal / 100 : startVal + 'px';
// 如果初始值等于最终值
if (startVal === endVal) {
// 清除定时器
clearInterval(time);
// 变量 累减1 也就是 少了一个执行的定时器
// num--;
// 当执行的定时器为0 时，所有定时器都清除了
if (num === 0) {
callback();
}
}
}, 20)
}
}
</script>
</body>
</html>运行结果：
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注阿兔在线工具的更多内容!
