Javascript30 - Day 5 - Flex Panel Gallery

Great intro to CSS Flexbox. I learned a few new tricks, such as using a nested flexbox to center content vertically. Pretty cool.

A caution about listening for transitionend and toggling a class when it has ended. If the transition is interrupted or reversed such as with a double click, you can end up with the transitionend listener firing on the wrong ending.

I think it's better to explicitly add and remove classes in this case which gives more control in case a transition is interrupted. I've implemented this simple change in my code and you can see how it doesn't permit the two animations to become detached in the case of a double-click.

Completion Time: ~20 Minutes

You can sign up for Javascript30 here: https://javascript30.com

You can view my gallery here: https://spencern.github.io/javascript30/05-flex-panel-gallery

You can see my code here: https://github.com/spencern/javascript30/tree/master/05-flex-panel-gallery