如何实现无需JavaScript/QuerySelector的滑入式动画联系表单？

可以利用CSS的:checked伪类结合隐藏复选框替代JavaScript的状态控制，实现完全无JS的滑入滑出交互。以下是修改后的完整代码：

修改后的HTML结构 #

<!-- 隐藏的复选框，作为状态开关 -->
<input type="checkbox" id="contactToggle" hidden>

<!-- 打开按钮：关联复选框 -->
<label for="contactToggle" id="contact">
  <div class="triangle-left"></div>
</label>

<div id="contactForm">
  <div class="containerContact">
    <form action="emailsend.php" method="post" enctype="text/plain">
      <h3 class="formheading">CONTACT</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit velit ut placerat suscipit.</p>
      <input type="text" name="name" placeholder="Name or Company*" size="75" autocomplete="on" required>
      <input type="text" name="phone" placeholder="Phone*" size="75" autocomplete="on" required>
      <input type="text" name="mail" placeholder="Email*" size="75" required>
      <select name="project" required>
        <option value="" disabled selected hidden>Test*</option>
        <option value="1">Test</option>
        <option value="2">Test</option>
        <option value="3">Test</option>
        <option value="4">Test</option>
        <option value="5">Test</option>
      </select>
      <textarea class="messageInput" name="Message" placeholder="Message*" rows="7" cols="45" required></textarea>
      <input class="sendButton" type="submit" value="Let's Chat!">
    </form>
    <!-- 关闭按钮：关联复选框 -->
    <label for="contactToggle" id="closeContact">
      <div class="triangle-right"></div>
    </label>
  </div>
</div>

修改后的CSS样式 #

.triangle-left {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-right: 50px solid #555;
  border-bottom: 25px solid transparent;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 50px solid #323;
  border-bottom: 25px solid transparent;
}

#contact {
  z-index: 200;
  background: none;
  border: none;
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  right: 30px;
  width: 60px;
}

#closeContact {
  z-index: 500;
  background: none;
  border: none;
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  right: 30px;
  width: 60px;
  /* 默认隐藏关闭按钮 */
  display: none;
}

#contactForm {
  top: 0;
  height: 100%;
  z-index: 400;
  position: fixed;
  background: lightblue;
  /* 初始状态：隐藏在右侧 */
  right: -300px;
  /* 滑入滑出过渡动画 */
  transition: right 0.5s linear;
}

.containerContact {
  padding: 25px;
  width: 300px;
  height: fit-content;
}

.formheading {
  font-size: 30px;
  color: #212529;
}

input[type=text] {
  margin: 0 auto;
  display: block;
  width: 100%;
  height: 20px;
  color: #212529;
  background: transparent;
  border: 1px solid #212529;
  font-size: 13px;
}

select {
  margin: 0 auto;
  display: block;
  margin-top: 15px;
  padding-left: 8px;
  width: 100%;
  height: 40px;
  background: transparent;
  border: 1px solid #212529;
  font-size: 13px;
}

select:required:invalid {
  color: gray;
}

option[value=""][disabled] {
  display: none;
}

option {
  color: black;
}

.messageInput {
  margin: 0 auto;
  display: block;
  margin-top: 15px;
  padding: 8px;
  width: 100%;
  color: #212529;
  background: transparent;
  border: 1px solid #212529;
  font-size: 14px;
  font-family: sans-serif;
  resize: none;
}

.sendButton {
  margin: 0 auto;
  display: block;
  cursor: pointer;
  margin-top: 15px;
  width: 100%;
  height: 40px;
  color: #FFF;
  background: #212529;
  border: 1px solid #212529;
  transition: all 0.5s ease-out 0s
}

.sendButton:hover {
  background-color: #000;
}

/* 复选框选中时的状态控制 */
#contactToggle:checked ~ #contactForm {
  right: 0;
}

#contactToggle:checked ~ #contact {
  display: none;
}

#contactToggle:checked ~ #contactForm #closeContact {
  display: block;
}

核心逻辑说明 #

• 用隐藏的复选框作为状态容器，点击关联的<label>会切换复选框的选中状态
• 通过CSS相邻兄弟选择器~和:checked伪类，根据复选框状态控制表单的位置（滑入/滑出）以及按钮的显示/隐藏
• 用transition: right 0.5s linear实现平滑的滑入滑出效果，替代原JS中的动画与定时器逻辑

内容的提问来源于stack exchange，提问作者MADesign