How to animate an element to the bottom of the screen then remove it from the DOM-CodePudding

I have a div that can be removed by pressing a button within the div. When I click this button in the div it instantly removes it. I would like it to animate the bottom of the screen and shrink in the span of roughly one second. How would I go about doing this?

This is the function that removed the element from the DOM.

function close_window(app) {
  app.parentElement.removeChild(app);
}

This is the styling that I have applied to the element.

.element {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 75vw;
  height: 60vh;
  border: 1px solid #eee;
  overflow: hidden;
  resize: both;
  transition-timing-function: linear;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

CodePudding user response：

Let the animation finish before actually removing the element. Wait for the setTimeout method to complete, then call remove on the <div>.

const el = document.querySelector('.element');
const close = document.querySelector('.close');

close.addEventListener('click', close_window);

function close_window(e) {
  el.classList.add('removed');
  setTimeout(() => el.remove(), 1000);
}

body {
  margin: 0;
}

.element {
  position: absolute;
  width: 75vw;
  height: 60vh;
  background: beige;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s linear;
  transform: translate(
    calc((100vw - 75vw) / 2),
    calc((100vh - 60vh) / 2)
  );
  transform-origin: bottom;
}

.removed {
  transform:
    translate(
      calc((100vw - 75vw) / 2),
      calc(100vh - 60vh)
    )
    scale(0);
}

<div >
  <button >Close</button>
</div>