1. 用jquery的css方法获取transform得到的是矩阵matrix,不利于获取translate的值,
优先使用dom.style.webKitTransform进行transform的读写
2. 从transform中读取translate的值方法
//jquery版本
functionfGetTranslate($obj,type){var transformMatrix = obj.css("-webkit-transform") ||obj.css("-moz-transform") ||obj.css("-ms-transform") ||obj.css("-o-transform") ||obj.css("transform");var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(',');var x = matrix[12] || matrix[4]; //translate x
var y = matrix[13] || matrix[5]; //translate y
if(type == 'x'){returnx;
}else if(type == 'y'){returny;
}return '';
}//dom版本
functionfGetTranslate(obj,type){var transform = obj.style.webkitTransform ||obj.style.transform;var aTrans = transform.replace(/[^0-9\-.,]/g, '').split(','),
res= '';switch(type){case 'x':
res= parseInt(aTrans[0]);break;case 'y':
res= parseInt(aTrans[1]);break;case 'z':
res= parseInt(aTrans[2]);break;default:break;
}return res || '';
}
3.tansform的效果会按照层级进行叠加,在父元素上的动画会叠加到子元素上,子元素上的多个动画也可以拆分为
多层元素的多个动画