我不知道为什么我的表单容器不能滑出，它就是不能移动，它滑进去很好，但是滑出来就是不行。我试过滑出phoneInput本身，但是它卡在容器的末端。假设你正确地连接了所有的东西，你会注意到我的元素滑进去了，但是当我点击按钮时，我的意图是让它们滑出，但只有标题滑出，表单容器没有滑出，甚至没有移动。

const params = new URLSearchParams();

// remove number formatting then add +1
function formatPhoneNumber(phoneNumberString) {
  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
  var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    return '+1' + match[1] + match[2] + match[3];
  }
  return null;
}

// login and send input data to server
function login() {

  const input = document.getElementById('phoneInput')
  let number = input.value

  if (isNaN(parseInt(number)) || parseInt(number) === null) {
    console.log('Invalid phone number');
    const divText = document.getElementsByClassName('heading-text')[0];

    divText.innerText = 'Invalid phone number!';
    divText.style.color = 'red';
    setTimeout(() => {
      divText.style.color = "black";
      divText.innerText = 'Please enter a valid phone number! No dashes or spaces!';
    }, 3000);
    return
  } else {
    formattedNumber = formatPhoneNumber(number)
    if (formattedNumber === null || formattedNumber.length > 12) {
      console.log('Invalid phone number');
      const divText = document.getElementsByClassName('heading-text')[0];

      divText.innerText = 'Invalid phone number!';
      divText.style.color = 'red';
      setTimeout(() => {
        divText.style.color = "black";
        divText.innerText = 'Please enter a valid phone number! No dashes or spaces!';
      }, 3000);
    } else {

      let heading = document.getElementsByClassName('heading')[0];
      let phoneForm = document.getElementsByClassName('form-container')[0];

      heading.classList.add('slide-out');
      phoneForm.classList.add('slide-out');

      params.delete("number")
      params.append('number', formattedNumber)
      fetch('http://localhost:3000/login', {
          method: 'POST',
          body: params
        })

        .then(function(response) {
          return response.json()
        })
    }
  }


}

body,
html {
  padding: 0%;
  margin: 0%;
  font-family: 'Poppins', sans-serif;
}

.heading {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2em;
  height: 60%;
  width: 100%;
  transition: opacity 0.5s;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

.heading-title {
  font-size: 2em;
  font-weight: 700;
}

.heading-text {
  text-align: center;
}

.form-container {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 1.5em;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

#phoneForm {
  display: flex;
  flex-direction: column;
  width: 50%;
  gap: 1rem;
}

#phoneInput {
  position: relative;
  flex: 1;
  width: 50%;
  border: solid 2px #d9d9d9;
  border-radius: 3px;
  align-self: center;
  padding: 7px;
  height: 100%;
}

#phoneLabel {
  padding-inline-start: 10em;
  font-weight: bold;
  align-self: flex-start;
}

.form-submit {
  align-self: center;
  background-color: #90E0EF;
  border: none;
  font-weight: bold;
  border-radius: 0.4em;
  padding: 1em 0em 1em 0em;
  width: 24em;
}

svg {
  color: #90E0EF;
}

#phoneInput:focus {
  outline: none;
  border-color: black;
}

@media screen and (max-width: 820px) {
  #phoneInput {
    width: 100%;
  }
}

@media screen and (min-width: 100px) and (max-width: 595px) {
  #phoneForm {
    width: 75%;
  }
}

@keyframes slide-in {
  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes slide-in {
  100% {
    -webkit-transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(100%);
  }
}

<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">
  <link rel="stylesheet" href="/css/login.css">
  <title>Document</title>
</head>

<body>

  <div class="heading">
    <div class="heading-image"><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="currentColor" class="bi bi-shield-lock-fill" viewBox="0 0 16 16">
            <path  fill-rule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5z"/>
          </svg></div>
    <div class="heading-title">Sign In To PrivDono</div>
    <div class="heading-text">Please confirm your phone number. No dashes.</div>
  </div>

  <div class="form-container">
    <form onsubmit="return false" id="phoneForm">
      <input type="tel" id="phoneInput" name="phone" required>
      <button onclick="login()" class="form-submit">NEXT</button>
    </form>
  </div>
  <script src="/js/login.js" defer></script>

</body>

</html>