最近有个任务是做一个很小的只有2个屏幕的h5应用，需要做全屏水平滑动切换和一些简单的动画效果。之前用fullpage.js和jquery做这种事情，性能不是很好，所以想自己做一个简单的事情。最后我用zepto hammer.js和carousel解决了这个问题，效果还不错。当整个页面没有打开Gzip时，所有资源请求的数据大小约为200KB。本文总结了该方法的实现思路。

效果演示：

1.实现要点。

1)滑动屏借鉴了bootstrap的carousel插件，但没有那么复杂，只需要借鉴其carousel的实现思路；

2)滑屏开关的触发与PC不同，通常是通过元素的点击回调来触发。对于滑动屏幕页面，可以通过window的hashchange事件来处理，这样只需要通过超链接设置锚点或者通过js改变location.hash就可以触发切换；

3)考虑到手机必须支持手势操作，可以使用手势库hammer.js，API非常简单易用；

4)动画效果可以使用animate.css，但不需要把它所有的代码都放进代码里，只需要复制与动画效果相关的代码即可；

5)zepto；是首选项，而不是jquery

6)屏幕滑动效果使用过渡动画。为了在动画结束后响应回调，可以考虑使用transition.js，这也是Bootstrap提供的工具。但是，默认情况下，它只能与jquery一起使用，并且只有在稍作更改后才能与zepto一起使用。

这几点比较粗糙，下面将详细介绍一下内容。

2.html结构。

的空白幻灯片页的html结构如下：

div id=' container ' class=' container ' section id=' page-1 ' class=' page-1 '/section section id=' page-2 ' class=' page-2 '/section section id=' page-3 ' class=' page-page-3 '/section/div html，

车身{ height : 100%；-web kit-tap-highlight-color :透明；}.集装箱。第{ position:页绝对；top : 0；left : 0；宽度： 100%；高度： 100%；飞越：隐藏；}.页面{overflow:隐藏；display:无；-web kit-transit :-web kit-transform . 4s ease；transition: transform .4s ease-web kit-back face-visibility :隐藏；背面-可见性：隐藏；}.集装箱和。页面用绝对定位和全屏布局初始化。每个section.page代表一个页面，默认情况下不显示。所有页面都有相同的定位，这意味着如果显示所有页面，这些页面将重叠。

演示页面的Html结构为：

div id=' container ' class=' container ' section id=' page-1 ' class=' page-1 ' div class=' page _ _ jump ' a href=' # page-2 ' title='下一页/a/Divp class=' page _ _ numanimated ' 1/p/section section id=' page-2 ' class=' page page-2 ' div class=' page _ _ jump ' a href=' # page-1 ' title='上一页/aa href='#。Page-3' title='下一页/a/div class=' page _ _ numanimated ' 2/p/section section id=' page-3 ' class=' page-3 ' div class=' page _ _ jump ' a href=' #。Page-2' title='与上一页相关的CSS/a/divp class=' page _ _ numanimated ' 3/p/section/div demo将不显示。其中动画是动画库animate.css的应用所需要的，github上有这个动画库。

3.滑动屏幕切换的实现。

滑动屏幕切换是通过js控制要滑动的两个页面来添加和删除下面定义的css类来实现的：

. page.page - active、 page.page - prev、 page . page-next { display : }块；} . page . page-next . page . page-active . page-active-right {-web kit-transform : translate 3d(100%，0，0)；transform: translate3d(100%，0，0)；}.page.page - prev， page . page-active . page-active-left {-web kit-transform : translate 3d(-100%，0，0)；transform : translate 3d(-100%，0，0)；} . page . page-next . page-next-left . page . page-prev . page-prev-right . page . page-active {-web kit-transform : translate 3d(0，0，0)；transform: translate3d(0，0，0)；}.page-active表示当前显示的页面。页面初始化后，调用下面的js进行添加。页面—激活：到第一页。

var $ activePage//初始化并显示第一页(function(){ $ active page=$(' # page-1 ')；$ activepage . addCLaSS(' page-active ')；})();默认情况下，此页面显示第一页。向左滑动屏幕，解释如何使用这些css:

第一步是找到下一页的部分，添加page - next类，并将其定位到当前页的右侧，为滑动屏幕做准备。

其次，找到当前页面的部分，并在其中添加page-active-left。因为这个类改变了translate3D属性的值，所以当前页面将向左滑动一个屏幕。

在第二步的同时，将page-next-left添加到下一页的部分。因为这个类改变了translate3D属性的值，下一页将向左滑动一个屏幕。

第三步，当前页面和下一个页面的动画完成后，找到原来的当前页面，去掉页面活跃类和页面活跃左类；

在第三步的同时，找到下一页，删除下一页和左下一页类，并添加活动页。

Gif图说明如下：

向右滑动屏幕的原理类似：

第一步是找到上一页的部分，添加page - prev类，并将其放在当前页的左侧，为滑动屏幕做准备。

第二，找到当前页面的部分，并在它的右边添加page page - active。因为这个类改变了translate3D属性的值，所以当前页面将向右滑动一个屏幕。

在第二步的同时，将page-prev-right添加到上一页的部分。因为这个类改变了translate3D属性的值，所以上一页将向右滑动一个屏幕。

第三，当前页面的幻灯片动画跟随上一页后，找到原来的当前页面，去掉页面活跃类和页面活跃右类；

在第三步的同时，找到上一页，删除page-prev和page-prev-right类，并添加page - active。

基于上述实现原则，JS函数封装如下：

var TRANSITION_DURATION=400，sliding=false函数getslide type($ target page){ var activepage id=$ activepage . attr(' id ')，target page id=$ target page . attr(' id ')；返回activePageId targetPageId？next ' : activepage id==TargetPageid？“:”prev；}函数幻灯片(TargetPageID){ var $ TargetPage=$(' # ' TargetPageID)；if(！$targetPage.length || sliding)返回；var slide type=getslide type($ target page)，direction=slideType=='next '？左' : '右'；if (slideType==' ')返回；滑动=真；$ TargetPage . AddClass(' page-' slide type)；$targetPage[0]。offsetWidth$ activepage . addclass(' page-active-'方向)；$ TargetPage . AddClass(' page-' slide type '-'方向)；$ activepage . one($ . transitionend . end，function(){ $ targetpage . remove class([' page-' slide type '，page - ' slideType '-' direction])。连接(“”)。add CLaSS(' page-active ')；$ activepage . remove class([' page-active '，' page - active-'方向])。join(“”)；$ activePage=$ targetPage滑动=假；}).仿真持续时间；}由于在初始化页面时，默认将$activePage指定为第一页，并且在每次屏幕slide后都会更新为最新的当前页面，因此只需在调用时将目标页面的id传递给slIDe函数即可。上述代码可能有问题：

1)$targetPage[0]。offsetWidth，此代码用于触发浏览器重绘，因为目标页面原来是display3360none，如果不触发重绘，下一步添加css类后就看不到动画效果了；

2)$.transitionEnd.end和仿真器translatencionend，这将在下一节中解释。

4.浏览器css动画结尾的回调与模拟。

Bootstrap提供了一个工具transition.js，用于判断浏览器是否支持css动画回调事件，在动画完成后浏览器没有自动触发回调时，通过模拟手动触发回调。本来这个工具只能和jquery一起使用，但是为了在zepto中使用，必须稍微改动一下。以下是更改后的代码：

(函数(){var transition=$ .transitionEnd={ end :(function(){ var El=document。createelement(' transitionEnd ')，transndeventnames={ webkittransition : ' webkitTransitionEnd '，mozztransition : ' transitionEnd '，otrans : ' otranstend ' otranstend '，transition : ' transitionEnd ' }；for(transEndEventNames中的var name){ if(El。样式[名称]！==未定义){ 0返回transndeventnames[name]；} }返回false })()}；$ .fn。allocateransitionand=function(duration){ var called=false，_this=this，callback=function () {if(！调用了)$(_this).触发器(过渡。结束)；};$(这个)。one(transition.end，function(){ called=true；});setTimeout(回调，持续时间);归还这个；};})();$.transitionEnd.end表示当前浏览器支持的动画结束事件的名称$.fn。仿真器是一个扩展了泽普托原型的一个方法，传入一个动画的过渡时间，当这个时间段过完之后，如果浏览器没有自动触发回调事件，叫做就始终是假的，设置超时会导致回收被调用，然后回收内部就会手动触发动画结束的回调。为什么要通过这个方式来模拟动画结束，是因为浏览器即使支持动画结束事件的回调，但是有些时候并不会触发这个事件，或者在动画结束后不能立即触发，影响回调的准确性。传入的期间应该与执行动画的元素，在钢性铸铁上设置的转移持续时间相同，注意以下代码中标黄的部分：

var TRANSITION _ DURATION=400 $ active page。一个($。过渡和。end，function(){ $ targetpage。移除类([' page-' slide type '，page - ' slideType '-' direction]).连接("")。添加CLaSS(' page-active ')；$ activepage。移除类([' page-active '，' page - active-'方向])。联接(" ")；$活动页面=$目标页面滑动=假；}).仿真持续时间；页面{overflow:隐藏；显示器：无；-网络套件-transit :-网络套件-转换。4s轻松；transit : transform . 4s ease-web套件-背面-可见性：隐藏；背面-可见性：隐藏；}5.hashchange事件

个人电脑端滑屏都是给元素添加点击事件触发的，移动端可以利用窗户的hashchange事件：

$(窗口)。on('hashchange '，函数{ var hash=location。哈希；if(！hash)hash=" # page-1 "；幻灯片(哈希。子串(1))；});位置。hash=' # page-1 '；hashchange事件，在射流研究…代码中通过改变loa行动。混杂或者是点击a href='#page-2' title=' '下一页/a这样的超链接时，都会触发，所以只要在这个事件的回调去做滑屏切换即可。这样那些上一页和下一页的链接元素都不用加事件了。

6.hammer.js使用简介

hammer.js是一个手势库，支持常用的手势操作，使用简单，引入它的射流研究…之后，通过以下的方式来支持手势滑屏：

//初始化手势滑动var容器=文档。getelementbyid(' container ')，mc=new Hammer .管理器（容器),滑动=新锤子swipe()；mc.add(刷卡);mc.on('swipeleft '，函数{swipteTo('next '，e)；});mc.on('swiperight '，函数{swipteTo('prev '，e)；});函数swipteTo(slideType，e){ var $ target page=$ activePage[slide type](').页');$ TargetPage。长度(位置。哈希=' # ' $ TargetPage。attr(' id ')；}把整个容器元素作为滑屏的舞台，监听到swipeleft事件，就表示向左滑，页面应该显示下一页；监听到swiperight事件，就表示向右滑，页面应该显示下一页。

7.结束语

animate.css的使用并不详细，而是相当简单。这是它的github地址：https://github.com/daneden/animate.css,这是一个非常容易使用的动画库。这篇文章记录了一些最近的工作经验，技术方面的东西，有时候有些话不能完全解释清楚，所以我只能尽量把一些问题解释得详细一点。如有不妥或有问题，请在评论区向我说明，我会仔细查看。另外，我对移动终端不太熟悉，所以你有更好的意见。请与我们分享。感谢您的阅读。新年快到了。祝你猴年快乐！