这是一个从侧面滑出菜单的动画特效,当点击选择书签时,从右侧滑入菜单,点击完成或灰色部分时滑出菜单。

   →  

最初采用jQuery的animate,通过改变侧栏菜单的right属性实现动画,发现在iphone5s上测试有严重的卡顿现象。

后来发现用css3的transform:translate实现就非常流畅了,translate() 的使用方法请参照这里

首先在样式里定义css3动画并将动画分别绑定到.sidebar-show .sidebar-hide

 

 

用jQuery判断触发动画的条件:

 

这样实现动画就很流畅了。

 

演示地址:http://ihtmlcss.com/test/m/QuestionAsk.html