点击按钮触发Div的SlidUp动画，实现显隐时执行动画

要实现点击按钮切换PostBox显隐时触发对应动画，需要调整原有CSS结构，通过类来控制动画触发，搭配JavaScript处理状态切换，具体方案如下：

调整后的CSS代码 #

/* PostBox基础样式，初始设置为隐藏状态 */
.PostBox {
  position: fixed;
  height: 60%;
  width: 100%;
  background-color: white;
  bottom: -60%; /* 初始位于视口外 */
  border-radius: 10px;
  border-top: 5px solid rgb(16, 150, 233);
  padding: 20px;
  display: inline-table;
  opacity: 0;
  visibility: hidden;
}

/* 显示动画触发类 */
.PostBox.slide-up {
  animation: SlidUp 3s ease-out forwards;
}

/* 隐藏动画触发类 */
.PostBox.slide-down {
  animation: SlidDown 3s ease-out forwards;
}

/* 显示动画关键帧 */
@keyframes SlidUp {
  from {
    visibility: hidden;
    bottom: -60%;
    opacity: 0;
  }
  to {
    visibility: visible;
    bottom: 0;
    opacity: 1;
  }
}

/* 新增隐藏动画关键帧 */
@keyframes SlidDown {
  from {
    visibility: visible;
    bottom: 0;
    opacity: 1;
  }
  to {
    visibility: hidden;
    bottom: -60%;
    opacity: 0;
  }
}

HTML结构 #

<button id="toggleBtn">切换PostBox</button>
<div class="PostBox" id="postBox">
  <!-- 这里放置PostBox的内容 -->
</div>

JavaScript逻辑 #

const toggleBtn = document.getElementById('toggleBtn');
const postBox = document.getElementById('postBox');

toggleBtn.addEventListener('click', () => {
  // 先移除已有的动画类，避免冲突
  postBox.classList.remove('slide-up', 'slide-down');

  if (postBox.classList.contains('is-visible')) {
    // 当前处于显示状态，触发隐藏动画
    postBox.classList.add('slide-down');
  } else {
    // 当前处于隐藏状态，触发显示动画
    postBox.classList.add('slide-up');
    postBox.classList.add('is-visible');
  }
});

// 监听动画结束事件，处理最终状态
postBox.addEventListener('animationend', (e) => {
  if (e.animationName === 'SlidDown') {
    postBox.classList.remove('is-visible');
  }
});

核心说明 #

1. 移除了原CSS中默认绑定的动画，改用独立的.slide-up/.slide-down类触发动画，确保只有在点击时才会执行动画，而非页面加载时自动运行。
2. 初始状态将PostBox设置在视口外+不可见，避免页面加载时的突兀效果。
3. 用.is-visible类标记PostBox的显示状态，配合JavaScript判断该执行显示还是隐藏动画。
4. 通过animationend事件监听动画结束，在隐藏动画完成后移除标记类，确保元素完全不可交互。

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