如何实现点击触发Div元素从右侧滑入的CSS Animation效果

核心实现方案 #

通过设置divValid的初始隐藏状态，搭配CSS过渡属性实现平滑动画，再通过JavaScript监听点击事件切换激活类来触发滑入/滑出效果。

修改后的完整代码 #

CSS 代码

.plat {
  border: 1px solid black;
  height: 70px;
  width: 95%;
  display: flex;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  background-color: white;
  margin-bottom: 20px;
  margin-left: 3%;
  cursor: pointer;
  overflow: hidden; /* 防止元素溢出容器 */
}

/* divValid 初始状态：隐藏，宽度为0 */
.divValid {
  border: 1px solid purple;
  background-color: #99E2D0;
  border-radius: 0 20px 20px 0;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 0;
  transition: width 1.5s ease; /* 设置1.5秒的宽度过渡动画 */
  display: flex;
}

/* 点击后激活的类，触发滑入效果 */
.plat.active .divValid {
  width: 20%;
}

.partRouge {
  border: 1px solid red;
  height: 100%;
  width: 100%;
}

.divTitlePlat {
  border: 1px solid orangered;
  height: 50%;
  width: 100%;
  padding-left: 2%;
}

.divTitlePlat h3 {
  font-size: 20px;
  margin-top: 0;
}

.divInfoPlat {
  border: 1px solid blue;
  height: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.divDescPlat {
  border: 1px solid green;
  height: 100%;
  width: 80%;
  padding-left: 2%;
}

.divPricePlat {
  border: 1px solid yellow;
  height: 100%;
  width: 20%;
}

HTML 代码

<div class="plat">
  <div class="partRouge">
    <div class="divTitlePlat">
      <h3>Tartare de poulpe acidulé</h3>
    </div>
    <div class="divInfoPlat">
      <div class="divDescPlat">
        <span>Aux zests d'orange</span>
      </div>
      <div class="divPricePlat">
        <span class="price">25€</span>
      </div>
    </div>
  </div>
  <div class="divValid">
    <i class="fa-solid fa-circle-check"></i>
  </div>
</div>

JavaScript 代码（点击切换逻辑）

const platItems = document.querySelectorAll('.plat');

platItems.forEach(item => {
  item.addEventListener('click', () => {
    item.classList.toggle('active'); // 切换激活类，实现显示/隐藏双向动画
  });
});

关键细节说明 #

• 给.plat添加overflow: hidden，避免divValid初始宽度为0时仍显示边框
• 通过transition: width 1.5s ease控制动画时长和曲线，可根据需求调整为1-2秒
• 点击事件通过classList.toggle实现激活类的切换，同时支持滑入和滑出效果

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