Animation classes

[andyfitzsuse]

http://codepen.io/andyfitz/pen/DdjoK

They do not stack (as in you cannot do .spin-forever.pulse )

useful for declaring what nice animation you would like upon introduction of an element.

.fade-down would be useful for almost all our disclosures like the notification stack.

these shouldn't be done with JS implementations as animations are only nice to have an not essential

[andyfitzsuse]

i've updated that for fade ins fade outs, pulse spins etc .

but i've also noticed this has been done before http://daneden.me/animate/ checkout http://daneden.me/animate/build/

I think we only need to use the fade in classes the bounce in down from animate is nice however

[knowncitizen]

What is this for, specifically? Is there something this can be applied to? Are these CSS only?

[andyfitzsuse]

these are css only. and to be applied as bonus helper classes.

When creating a new object in the DOM (eg

you can append one of the fade-in* classes and that will animate it's introduction rather than it just "appearing" ...

this is CSS only because the fallback is browsers will ignore the CSS and objects will still appear and disappear when they are summoned or removed.

the pulse, spin and bounce animation classes are ideas for throbber style animations. eg authenticating... could be greatly improved with authenticating we would modify the animation to be a little less extreme than in the examples of course..

using css helpers for all our animations means we keep browser compatibility all the way down and have an easy method for calling on rich functionality without resorting throwing unstable (and easy to break) jquery crack in the mix.

[knowncitizen]

So these work on IE8?

[andyfitzsuse]

I can't tell if you're trolling me mate.

They do not work in ie8, they do work in ie9-10

They would work in ie8 if we decided to polyfill but I suggest that isn't worthwhile considering at all.

The point of this method is to ensure animations wont break anything that already works in IE8 The fallback behaviour of (things appearing instantly when they are asked and disappearing instantly when they are meant to) is great. not animating in our out is fine; this shouldn't ruin any customers expectation.

The jquery method is nasty because it thrusts this feature on everybody. even client browsers that have a hard time processing the animations at all.

the CSS method takes what is meant to be an added bonus and ensures it stays that way. not breaking IE8 because it isnt being parsed by IE8.

[knowncitizen]

I'm not trolling you. We need to support IE8, and FF3.6. Polyfills are one way to do things, but imo pretty ugly. jQuery works and isn't exactly "nasty" since we're not doing crazy spinning and pulsing. I just want to make sure we're targeting our efforts properly.

[knowncitizen]

EW: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills - what a mess

[andyfitzsuse]

All good then.

So we're agreed that .fade-in-down on introduced objects doing nothing for ie8 is not a real problem.

polyfills can be avoided here because its not essential functionality.

spinning for a throbber is not essential either

simply stating loading... is fine

[andyfitzsuse]

so long as we have sane fallbacks for unsupported features (eg background-color: having a decent value behind every background-image: linear-gradient ) then we should not worry about polyfills for things like gradients, border radius, box-shadow, animations etc

they will take already bad browsers on assumedly bad systems and grind the client CPU to a halt.

its not so bad to have a blue background, white text, shaded & rounded box look like a solid blue rectangle with white text on IE' people will still get that it's a button and it should stay in the right place.

having animation not happen should be the same. no animation at all is totally acceptable

[jcoufal]

+1 for @andyfitz and fallbacks explanation

I think that we should first figure out where we need (or use) these functions and then we can adding them one by one depending on our needs.

Fade-in/out makes sense for me now, pulsating and bouncing less... I wouldn't implement that if we don't have a clear use-case for that.