Use classes instead of inline styles for translate

[jamiechong]

I'm developing an app that is using a fixed positioned header. I show/hide the header using transform: translateY(-100%);

However, when revealing the slidebar, the element gets an inline style applied:

<div style="transition-duration: 300ms; transform: translate(-255px, 0px);"  id="main_menu" canvas="" ></div>

This is clobbering my translateY and forces the header to show again, even when it shouldn't.

Use classnames instead of inline styles and provide default css, which can be overridden by devs