Changing Drawer Menu Behavior

[Anatoli]

I'm working on the UI for an iOS 7 app, and the drawer menu interaction isn't suitable for iOS 7. I'm trying to redesign the drawer to something like this: http://cdn1.dribbble.com/users/221741/screenshots/1154748/attachments/149461/whatsapp-ios7-sidemenu.png

When the drawer menu shows up, it adds some CSS3 transform3d property to the view which is open. I was able to modify the behavior by overriding the style using "!important, but the animation is kinda jaggy, and want to know if there is a better way to do this.

Example of what I'm trying to do: http://jsfiddle.net/thilak/kk83s/

[Petyo]

Hello Purna,

The jsfiddle link seems to be empty (the service experiences availability problems recently). Can you please try to re-post it? Thank you in advance.

Regards,
Petyo
Telerik

[Anatoli]

Here's the example again: http://jsfiddle.net/thilak/7ubkr/

[Petyo]

Hello Purna,

It seems like I am missing something. The jsfiddle does not contain the CSS override you refer to in your initial post. 

Regards,
Petyo
Telerik

[Anatoli]

Ouch! How can I get it wrong twice in a row? Here it is - http://jsfiddle.net/thilak/gu9Xj/2/

[Petyo]

Hi,

Thank you for the provided link. I can verify that your approach is, in fact, the most optimal (while also being the simplest). Unfortunately, the animation performance depends on the device capabilities and the size of the animated element. Scaling the whole view down is an expensive task, which most probably won't be very smooth on a mobile device. 

Regards,
Petyo
Telerik