moxdev
6/1/2017 - 4:44 PM

Transition properties on click

Transition properties on click

  <script>

    const panels = document.querySelectorAll('.panel');

    function toggleOpen() {
      panels.forEach(panel => panel.classList.remove('open'));
      this.classList.toggle('open');
    }

    function toggleActive(e) {
      if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
      }
    }

    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

  </script>