css 过渡不起作用，在添加标签之前它曾经起作用

Question

此代码用于在线商店网站上的新用户注册页面，但是为什么当按下“继续”按钮时，转换不起作用

在添加标签之前它曾经有效

.form-signin {
  max-width: 330px;
  padding: 1rem;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav {
  width : 100%; 
  margin-right: 0px;
    margin-bottom: 0px;
    position: relative; 
    
}

.span {
  padding: 13px 1px;
    background: url(../images/menubar.png);
    background-repeat: round;
    background-size: cover;
    color: white;
    font-size: 1.2em;
    font-variant: small-caps;
    cursor: pointer;
    display: block;
    width: 100%;
}

.span::after {
  float: right;
  right: 10%;
  content: "+";
}

.slide {
  clear:both;
  width:100%;
  height:0px;
  overflow:auto;
  text-align: right;
  transition: height .4s ease;
}

.slide li {padding : 10px;}

#touchp {position: relative; opacity: 0; height: 0px;}    

#touchp:checked + .slide {height: 100%;overflow:visible} 

#touch {position: absolute; opacity: 0; height: 0px;}    

#touch:checked + .slide {height: 100%;overflow:visible} 

<link rel="stylesheet" href="https://raw.githubusercontent.com/3bada-191/b/main/boosttrap.min.css"/>

<main class="form-signin w-100 m-auto">
  <form action="" method="post">
      <div  style="direction:rtl">
      <a href="index.php">
          <img class="mb-4" src="images/logo.png" alt="logo" width="72" height="57" style="display: block;"></a></div><!--this is logo so modify it-->
    <h1 class="h3 mb-3 fw-normal" style="text-align:right">التسجيل</h1>
      <div class="form-floating">
      <input type="text" class="form-control" id="floatingInput" placeholder="XXXXXXXXXX">
      <label for="floatingInput">اسم المستخدم</label>
    </div>
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
      <label for="floatingInput">البريد الالكتروني</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">كلمة السر</label>
    </div>
    <div class="nav">

  <label for="touchp" style="width: 100%;color: #fff;background-color: #0d6efd;border: 1px solid #0d6efd;text-align: center;cursor: pointer;padding: 0.375rem 0.75rem;border-radius: 0.375rem;">متابعة
</label>               
  <input type="checkbox" id="touchp"> 

  <ul class="slide" style="padding-left:0px !important">
      <div class="form-floating">
      <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
      <label for="floatingInput">البريد الالكتروني</label>
    </div>
    <div class="c"></div>
  </ul>

</div>
       <p style="text-align:right">هل لديك حساب <a href="login.php" style="text-decoration:none;cursor:poiner;">تسجيل الدخول</a></p>
  </form>
</main>

这是boosttrap.min.css

在添加标签之前它曾经有效

我尝试调整和使用这个，但没有成功

.slide {
            height: 0;
            overflow: hidden;
            transition: height 0.4s ease;
        }

Answer 1

“4s”之前有一个点