JSFiddle - React, Tailwind, and code Playground

by etthree

HTML

<div class="selector-button">
  <p>Кнопка</p>
</div>
<div class="selector-overlay" style="transform: translateY(100%); opacity: 0;">
  <div class="overlay-interface" style="transform: translateY(100%)"></div>
</div>

CSS

.selector-overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.overlay-interface {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: rgba(255, 255, 255, 1);
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

JavaScript

const selectorButton = document.querySelector('.selector-button');

const selectorOverlay = document.querySelector('.selector-overlay');
let overlayInterface = selectorOverlay.querySelector('.overlay-interface');

selectorButton.addEventListener('click', function () {
  selectorOverlay.style.transform = 'translateY(0)';
  selectorOverlay.style.opacity = '1';

  selectorOverlay.addEventListener('transitionend', () => {
  	transitionTranslateY(overlayInterface)
  });
});

function transitionTranslateY(transitionElement) {
  if (transitionElement.style.transform == 'translateY(100%)') {
    transitionElement.style.transform = 'translateY(0)';
  } else {
    transitionElement.style.transform = 'translateY(100%)';
  }
}