javascript 手勢（swipeLeft,swipeRight）滑動中使用css3動畫卡頓，開啓硬件加速

今天，在作一個移動端項目，遇到了css3動畫卡頓的現象.

例圖：

在手勢滑動中（swipeLeft,swipeRight）遇到了動畫卡頓的現象，最後使用了css3動畫-webkit-transform:transition3d(0,0,0) 開啓 GPU硬件加速 模式解決。

這種GPU硬件加速在當今PC機及移動設備上都已普及，在移動端的性能提高是至關顯著地，因此建議你們在作動畫時能夠嘗試一下開啓GPU硬件加速。

直接上代碼：

<div class="Hypertension-Exhibition f">

   <div class="box">

　　<ul>
　　　　<li>
　　　　　　<img src="./img/2.jpg"/>
　　　　　　<i>希愛力他達拉非片</i>
　　　　　　<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
　　　　　　<span>查看詳情</span>
　　　　</li>
　　　　<li>
　　　　　　<img src="./img/2.jpg"/>
　　　　　　<i>希愛力他達拉非片</i>
　　　　　　<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
　　　　　　<span>查看詳情</span>
　　　　</li>
　　　　<li>
　　　　　　<img src="./img/2.jpg"/>
　　　　　　<i>希愛力他達拉非片</i>
　　　　　　<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
　　　　　　<span>查看詳情</span>
　　　　</li>
　　　　<li>
　　　　　　<img src="./img/2.jpg"/>
　　　　　　<i>希愛力他達拉非片</i>
　　　　　　<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
　　　　　　<span>查看詳情</span>
　　　　</li>
　　　　<li>
　　　　　　<img src="./img/2.jpg"/>
　　　　　　<i>希愛力他達拉非片</i>
　　　　　　<var>￥543.00<em>&nbsp;&nbsp;20mg*8片/盒</em></var>
　　　　　　<span>查看詳情</span>
　　　　</li>
　　</ul>
　　</div>
</div>

真機測試後，卡頓現象不存在，手勢滑動變的流暢了 .代碼還有許多優化的地方，在這就不優化了。徹底也能夠使用touchstart,touchmove,touchend模擬swipe，在這爲了提升開發效率就不本身寫了

下班了趕忙走了。。。