页面的横向布局我们已经实现好了，那么如何实现页面与页面之间的切换呢？
一般来说要根据布局的结构来，大体有2种：
显而易见，移动父容器简单很多，只需要改变父容器X轴的坐标就可以了。如果父容器中子元素有很多的话，那么我们会考虑第二种算法，可以做成动态加载，但是这种处理是超级麻烦，这里不讨论
改变坐标的处理可以分为2种：
传统的就是修改元素style是坐标属性，这个没什么好说的，使用简单，一般都需要配合定时器使用。
CSS3引入了一个新的属性Transform
transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的，translate3d这里指明了3d就是启用了3d加速，也就是启动GPU来处理，性能更强
过去，为了实现这种平滑的过渡效果，我们需要借助于Flash技术，现在只需要简单的使用CSS3 Transition的方法就可以实现，这是一个简单的动画属性
transition可以设置一些具体的参数，比如动画执行的时间，变化的算法、动画延时等等，具体大家可以搜索更细致的资料
这里需要特别注意的就是：
transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程
简单的一句话描述就是
通过设置transition的一些参数，让translate3d这个属性发生变化
如何通过translate结合transition改变元素的页面位置，我们具体看到右边的代码
通过点击"点击页面开始切换"出现页面切换的效果
打开index.html文件，在代码的102行填入相应代码，这样能让页面开始滚动
element.css({
'transition-timing-function': 'linear',
'transition-duration': '5000ms',
'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //设置页面X轴移动
});
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
