本文介绍如何利用CSS3的transition、transform和display:flex属性实现页内多个div的动画切换效果。作者通过实践，参考淘宝网触屏版，理解并应用了相关基础知识，包括贝塞尔曲线的概念。文中提供了个人编写的demo代码，欢迎大家指正。
因为最近的项目里面有用到页内多个div之间的左右动画切换，之前没接触过，然后查了下网上的方法，有点瞅不明白，有的使用js的监听事件touchmove之类的方法，也有的是使用css3的transition属性来进行实现。毕竟看别人的方法自己不实践那是完全不能收为己用的，云里雾里只会。于是，我决定自己写个demo玩一下。
其实，淘宝网触屏版是个很不错的借鉴网站，毕竟都是大牛写的，没事的时候可以多看看大牛们写的网站，会有很多收获。这里先给出淘宝网触屏版的网址：https://h5.m.taobao.com/#index，当然还有别的很好的网站，自己查咯。
再编写之前，应该熟悉一下一些基础知识，下面列出一些来：
1）css3的transition属性，可参考：http://www.w3school.com.cn/cssref/pr_transition.asp，要仔细看哟，属性transition的各个值的意义和用法；
2）css3的transform属性，可参考：http://www.w3school.com.cn/cssref/pr_transform.asp，其中的translate3D值的使用，具体可自己搜一下更精确地讲解，并自己试验一下最好；
3）css3的display:flex属性，可参考：http://blog.sina.com.cn/s/blog_a20696480102v6qj.html，后期我会进行大致的研究与实验，毕竟现在我也只是小小的测试了一下，对这个属性还不非常了解；
4）cubic-bezier贝塞尔曲线，这个可大致了解一下，毕竟比较深了，可参考：http://www.xuanfengge.com/cubic-bezier-bezier-css3-animation-tools.html。
好了，大致先列这些，以后再补充。先上代码，我的demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>测试</title>
<
最低0.47元/天 解锁文章
1083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
