移动端滑屏全应用【一】cssHandler操作基础动画函数封装

时间:2022-10-01 08:41:01

前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速。我们都会使用getComputedStyle来获取结点的最终样式,但使用getComputedStyle来获取transform时我们获取到的是一个矩阵值,而且是无法通过设置矩阵值反向设置transform的效果的。如下:

body.style.WebkitTransform = 'translateY(50px)'
getComputedStyle(body)['transform'] // "matrix(1, 0, 0, 1, 0, 50)"

综上,在设置transform的时候和常规样式设置的方式就有区别了,而cssHandler就是一个用来获取和设置css样式的函数,这其中就兼容了transform的获取和设置。

首先是transformHandler函数的封装,这其中的原理就是: 实时在需要获取或设置transform样式的元素上绑定自定义的transform具体值,需要获取时便从中获取,需要设置的时候便在其中的基础上进行设置。

transformHandler函数如下:

function transform (el, attr, val) {
if (!el.transform) {
el.transform = {
};
}
if (val === undefined) {
return el.transform[attr];
}
el.transform[attr] = val;
var str = "";
// 此处要注意必须要在原由的基础上遍历
for (var s in el.transform) {
switch (s) {
case "rotate":
case "rotateX":
case "rotateY":
case "rotateZ":
case "skewX":
case "skewY":
str += s + "(" + el.transform[s] + "deg) ";
break;
case "scale":
case "scaleX":
case "scaleY":
str += s + "(" + el.transform[s] + ") ";
break;
case "translateX":
case "translateY":
case "translateZ":
str += s + "(" + el.transform[s] + "px) ";
break;
}
}
el.style.WebkitTransform = el.style.transform = str;
}

然后在将transformHandler与常规的样式处理方式进行合并,得到cssHandler如下:

function css (el, attr, val) {
var transformAttr = ["rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "scale", "scaleX", "scaleY", "translateX", "translateY", "translateZ"];
for (var i = 0; i < transformAttr.length; i++) {
if (attr === transformAttr[i]) {
return transform(el, attr, val);
}
}
if (val === undefined) {
val = getComputedStyle(el)[attr];
console.log(val);
val = parseFloat(val);
return val;
}
if (attr === "opacity") {
el.style[attr] = val;
} else {
el.style[attr] = val + "px";
}
}

移动端滑动全应用【二】会分享移动端的幻灯轮播图的实际操作。

请持续关注。。。