JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div tabindex="-1" class="_1txFK transform-scale-animate" style="transform-origin: left top 0px;">
  <ul class="_3s1D4">
    <li tabindex="-1" class="_10anr vidHz _3asN5" data-animate-dropdown-item="true">
      <button class="btn-attach" id="btn-attach-photo">button</button>
    </li>
  </ul>
</div>

CSS

.transform-scale-animate {
  transition: all 0.3s;
  overflow: hidden;
  transform-origin: top center;
  transform: scale(1);
  display: block;
}

JavaScript

btnAttach.on('click', e => {
  e.stopPropagation()
  if (this.el.menuAttach.classList.contains('open')) {
    this.closeMenuAttach()
  } else {
    this.el.menuAttach.addClass('open')
    document.addEventListener('click', this.closeMenuAttach.bind(this))
    this.el.menuAttach.children[0].style.transform = 'scale(1)'
  }

})