search

WestpacCXTeam / GUI-source

Westpac GUI source code
http://WestpacCXTeam.github.io/GUI-source
GNU General Public License v2.0
37 stars 19 forks source link

CSS animations vs JS animations in modal #200

Open jharris-westpac opened 8 years ago

jharris-westpac commented 8 years ago

Tag: Enhancement

In order to make porting the GUI 2 to Angular more simple, I would like to have all animations and transitions done in CSS rather than JavaScript / JQuery for the GUI JS modules. I feel that CSS is the correct place to define these and gives us more control and also more portability between languages. With a simple class toggle we should be able to execute any animation.

The main issue here is that you usually want to run some JavaScript 'after' the animation ends, for example a modal opening you want to focus some elements once complete. CSS3 and modern browsers do implement these animation finish events and can be captured like this https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/

I've started writing a TypeScript / AngularJS service port of the above code already. Next i will look at porting the existing GEL 2 JQuery animations to CSS3.

dominikwilkowski commented 8 years ago

Hey James,

We actually follow your philosophy and only use js where we absolutely have to. Some modules that need it only add and remove classes but other we are not lucky enough to be able to do it all in CSS. The the popover modules for example we have to detect the edge of the browser to make use the popover is never cut off. This I'm afraid is not possible with CSS alone. Others like transitioning to auto is not supported with CSS3 which is why we have that implemented in the tabcordion module. However I am very happy to hear any way to reduce js if you have any suggestions.

jharris-westpac commented 8 years ago

Hi Dom,

I was actually looking at the Modal module. In particular in the modals.js : 39

https://github.com/WestpacCXTeam/GUI-modals/blob/master/js/modals.js#L39

$('.modal-backdrop').fadeTo( 200, 0, function fadeOut() {
    $('.modal-backdrop').remove();
});

The fadeTo could be replaced with CSS, as could the opacity 0 below that a few lines. Not bad on the whole however :) Nice work.

dominikwilkowski commented 8 years ago

Very good point! I agree :) I'll tag this as a modal enhancement then.