@vcl/vcl/layer/demo/example-with-zoom-animation.html

The whole VCL in one package

<div class="example-layer-width-animation">
  <button id="showDialog" type="button" class="button emphasized">
    <div class="icogram"><span class="text">Show Dialog</span></div>
  </button>
</div>

<script>
  const CLOSE_MODAL_DURATION = 0;

  const docRoot = document.demoShadowRoot || document;

  const showDialog = docRoot.querySelector('#showDialog');

  let myTimeout;

  const layerHTML = `
  <div class="layer" role="dialog">
  <div class="layer-box zoom">
    <div class="panel panel-dialog danger m-0" role="dialog">
      <div class="panel-body">
        <div class="panel-content">
          <div class="icogram">
            <div
              class="icon far fa-question-circle scale300p"
              aria-hidden="true"
              aria-label="account"
              role="img"
            ></div>
            <div class="text">Do you really want to delete XY?</div>
          </div>
        </div>
      </div>
      <div class="panel-footer no-bg row justify-content-end center">
        <div class="loose-button-group">
          <button
            type="button"
            class="button transparent outline cancel"
            id="cancel"
          >
            <div class="icogram">
              <span class="text">Cancel</span>
            </div>
          </button>
          <button type="button" class="button danger delete" id="delete">
            <div class="icogram">
              <span class="text">Delete</span>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="layer-cover"></div>
  `;

  showDialog.addEventListener('click', () => {
    if (myTimeout) {
      clearTimeout(myTimeout);
    }

    showDialog.parentElement.insertAdjacentHTML('beforeend', layerHTML);

    const layerCover = docRoot.querySelector('.layer-cover');
    const layer = docRoot.querySelector('.layer');

    const cancelBtn = docRoot.querySelector('#cancel');
    const deleteBtn = docRoot.querySelector('#delete');

    // Listeners
    deleteBtn.addEventListener('click', () => {
      layerCover.classList.add('fade-animation');
      layer.classList.add('fade-animation');

      myTimeout = setTimeout(function () {
        layer.remove();
        layerCover.remove();
      }, CLOSE_MODAL_DURATION);
    });

    cancelBtn.addEventListener('click', () => {
      layerCover.classList.add('fade-animation');
      layer.classList.add('fade-animation');

      myTimeout = setTimeout(() => {
        layer.remove();
        layerCover.remove();
      }, CLOSE_MODAL_DURATION);
    });

    docRoot.onclick = (event) => {
      if (event.target === layerCover || event.target === layer) {
        layerCover.classList.add('fade-animation');
        layer.classList.add('fade-animation');

        myTimeout = setTimeout(() => {
          layer.remove();
          layerCover.remove();
        }, CLOSE_MODAL_DURATION);
      }
    };
  });
</script>