transition.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .enter-from {
      transform: translateX(200px);
    }
    .enter-to {
      transform: translateX(0px);
    }
    .enter-active {
      transition: transform 1s ease-in-out;
    }

    .leave-from {
      transform: translateX(0px);
    }
    .leave-to {
      transform: translateX(200px);
    }
    .leave-active {
      transition: transform 1s ease-in-out;
    }
  </style>
  <body>
    <script>
      const el = document.createElement('div');
      el.classList.add('box');
      el.classList.add('enter-from');
      el.classList.add('enter-active');
      document.body.appendChild(el);
      requestAnimationFrame(() => {
        el.classList.remove('enter-from');
        el.classList.add('enter-to');
        el.addEventListener('transitionend', () => {
          el.classList.remove('enter-to');
          el.classList.remove('enter-active');
        });
      });

      el.addEventListener('click', () => {
        const performRemove = () => el.parentNode.removeChild(el);
        el.classList.add('leave-from');
        el.classList.add('leave-active');
        requestAnimationFrame(() => {
          el.classList.remove('leave-from');
          el.classList.add('leave-to');
          el.addEventListener('transitionend', () => {
            el.classList.remove('leave-to');
            el.classList.remove('leave-active');
            performRemove();
          });
        });
      });
    </script>
  </body>
</html>