css - Converting my jQuery animations to CSS3 transitions — "proper" methods / handling variables? -

i'm on first big website project (although still personal, in sense portfolio website, , not client). i'm of way done, , have learnt lot of course of doing it.

the majority of animations , other things changing , moving around on site done using jquery animations. however, has come attention today using css3 transitions better, more efficient, , nicer way things!

as such i'm in process of changing bunch of jquery animations on css3 transitions, , it's gone smooth. have few question proper methods, however.

example 1

for example, best way handle transition needs occur when variables in js set? there way pass these variables css, or use jq tell "when true, add these transition properties css", in order trigger animation?

eg:

an element must change it's height. height change different depending on screen width - handled media queries. but, height should change if xyz = true, other wise, should stay same. how can css know whether or not xyz true?

example 2

#header set height using media queries determine page width. when xyz = true, #header's height should animate down 0. when xyz = false #header should return it's initial height (as defined media queries).

the problem here setting css transitions in place animate #header 0, has become part of element's style, , "0" override values give trying return initial.

this problem tackled in css selectors (i believe that's they're called? things such :hover , :click.)—when used, not overriding element's style, , can return initial properly. here, there no selectors when xyz = true. have set values in jquery, overriding possibility of returning initial.

problem

how can these examples combated? both asking same question; there way pass css variables when true, or way create selector of sorts?

there no "correct" method things. however, using css transitions/animations doesn't mean have avoid javascript logic.

for example, lets wanted change colour of element based on logic. instead of using .animate() or .css() set value in jquery, set following css classes:

.element {     color: red;     transition: color 300ms; }  .element.active {     color: blue; } 

then in jquery, following:

if ( condition )     $('.element').addclass('active'); else     $('.element').removeclass('active'); 

you can use method on animatable css property, need have correct transition set on element. javascript contains logic , applies relevant classes, , css handles transitions.

if, on rare condition need use specific values can retrieve javascript (eg, computed values), can still use css animate properties. example, if wanted animate width of element specific value. in css, may have this:

.element {     width: 200px;     transition: width 300ms; } 

and in javascript, this:

if ( condition )     $('.element').width('400px'); else     $('.element').width(''); 

as rule of thumb, should use method if values computed. if values static, should use first method of toggling classes.