JS滚动数字组件封装-初识ES5面向对象编程-动画与定位方式transition和transfrom的优缺点兼容性对比

1.效果展示

动图如上，但是帧率不高，显示的效果可能有点不好，可以访问艾媒集团官网-艾媒监测查看效果。

2.需求分析

在这个动画效果中，我们可以看到，滚动的区域就是最里面的矩形区域，滚动的内容分为两种，一种是可以滚动的数字，一种是不允许滚动的分隔符。
设矩形局域的类名为box，数字内容的类名为num，分隔符的类名为separator。可得矩形区域所具有的固定样式如下：

.box{
	display : inline-block;/*为了让容器的宽度自适应内容,如果不需要则去除*/
	overflow : hidden;/*或overflow-y:hidden。总之垂直方向的溢出一定要隐藏*/
	white-space : nowrap;/*内容不允许换行，如果需要多行则需要创建多个box*/
}

而数字内容和分隔符与父元素高度的关系如下：

上面的图不知道大家看懂了多少，我这里再稍微解释一下，为什么要用相对定位去做动画。首先，如果不考虑外部情况的话，让一个盒子距离现有位置的顶部距离发生改变的话，方法有这么几种。我这里列举一下，并说一下优点缺点。

2.1 定位方式对比

定位方法	所属排版流派	优点	缺点
margin	标准流	简单，很多人都会用	当使用maring-top:100%时得到的值是父元素的宽度值，即上下左右的margin的%只以父元素的宽度为参照
padding	标准流	简单	padding无法使用负值,所以单纯使用padding无法实现元素的向上移动。
小结	标准流	简单，常见	共同缺点，使用padding或margin都容易导致父元素或子元素的宽高因为挤压而发生改变。加上无法实现便捷地上下移动，因此不考虑使用标准流实现动画
transfrom	css3	功能强大，支持xyz3轴的平移旋转	浏览器兼容问题需要开发者手动解决，例如向上移动一格，CSS的标准属性为transfrom: translateY(-100%);但是有些浏览器因为版本更新问题无法支持标准CSS3属性，必须用带前缀的属性，常见的前缀有-webkit- 、-moz-、-ms-、-o-。分别对应chrome、firefox、IE和opera五大浏览器中的四个。完整的transfrom属性见表后2.2.1示例。
top(absolute)	定位流	排版稳定，常见	绝对定位的元素会脱离标准流，导致父元素无法识别到子元素宽高，从而无法根据子元素宽高来做宽高自适应
top(relative)	定位流	不脱离标准流、排版稳定，常见	暂无

2.2 动画方式介绍和优缺点对比

想让一个元素实现动画或者说是过渡效果，一般有几种方式。
1.是使用css的transition属性，例如想让div.box元素的宽度属性有一个0.4s的过渡动画，则可以设置

.box{
	transition: width 0.4s;/*或transition: all 0.4s;*/
}

但是因为是CSS3的新增属性，transform和transition一样需要做兼容处理。

2.2.1 transfrom的兼容处理

示例代码如下：

.box{
	-webkit-transfrom: translateY(-50%);/*兼容老版本chrome浏览器*/
	-ms-transfrom: translateY(-50%);/*兼容老版本IE*/
	-moz-transfrom: translateY(-50%);/*兼容老版本firefox*/
	-o-transfrom: translateY(-50%);/*兼容老版本opera浏览器*/
	transfrom: translateY(-50%);/*标准写法*/
}

可以看到，为了使得transform属性在各大浏览器上都可以正常使用，我们需要同时设置5个属性，分别是1个标准属性和4个浏览器私有属性。如果写在css中还好，但是当我们要用js去动态设置transform的位置时就会显得