In this lesson I create an interactive panel gallery.
First I find all of the elements with a class of '.panel', I then listen for the following:
-
'.panel'
- 'click', toggleOpen()
- 'transitionend', toggleActive()
In toggleOpen() - Toggle a class '.open' on the item.
In toggleActive(e) - Check if the animation that finished was the 'flex' animation 'e.propertyName.includes('flex')'. If so, I toggle the second class '.open-active'.
See the Pen
JavaScript30 - 5 - Flex Panel Gallery by Corey Noble (@CoreyNoble)
on CodePen.