HTML/CSS：如何为按钮控制的Div实现平滑过渡及弹跳效果？

针对你当前生硬的显示隐藏切换，以下是三种可行的实现方案，均基于你的原有代码修改，无需额外依赖：

思路1：CSS Transition 结合贝塞尔曲线（快速实现弹跳） #

核心是放弃display属性，改用max-height+opacity实现过渡，通过自定义贝塞尔曲线自带弹跳效果。

修改后的代码 #

<div class="container">
  <div class="first">
    <p> Hello world</p>
  </div>
  <div class="second">
     <p> Goodbye World</p>
  </div>
</div>
<button class="button1" >Apply</button>

.container {
  display: flex; 
  align-items: center;
  justify-content: space-around;
  width: 100%; 
  background: red;
}

.second {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* 贝塞尔曲线参数实现弹跳感：先超出目标位置再回弹 */
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(0.9);
}

/* 激活状态的样式 */
.second.active {
  max-height: 100px; /* 设一个比内容实际高度大的值 */
  opacity: 1;
  transform: scale(1);
}

const button = document.querySelector(".button1");
const content = document.querySelector(".second");

button.addEventListener("click", function() {
  content.classList.toggle("active");
});

思路2：CSS Keyframes 自定义弹跳动画 #

如果需要更精细的弹跳节奏控制，用关键帧动画定义显示/隐藏的完整过程。

修改后的代码 #

<!-- HTML 保持不变 -->
<div class="container">
  <div class="first">
    <p> Hello world</p>
  </div>
  <div class="second">
     <p> Goodbye World</p>
  </div>
</div>
<button class="button1" >Apply</button>

.container {
  display: flex; 
  align-items: center;
  justify-content: space-around;
  width: 100%; 
  background: red;
}

.second {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: scale(0.8);
}

/* 显示动画：先放大到1.05再回弹到原大小 */
.second.active {
  animation: fadeInBounce 0.6s forwards;
}

/* 隐藏动画：平滑缩小并透明 */
.second.inactive {
  animation: fadeOutShrink 0.4s forwards;
}

@keyframes fadeInBounce {
  0% {
    max-height: 0;
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    max-height: 120px;
    opacity: 1;
    transform: scale(1.05); /* 弹跳峰值 */
  }
  100% {
    max-height: 120px;
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOutShrink {
  0% {
    max-height: 120px;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    max-height: 0;
    opacity: 0;
    transform: scale(0.8);
  }
}

const button = document.querySelector(".button1");
const content = document.querySelector(".second");

button.addEventListener("click", function() {
  if (content.classList.contains("active")) {
    content.classList.remove("active");
    content.classList.add("inactive");
  } else {
    content.classList.remove("inactive");
    content.classList.add("active");
  }
});

思路3：Web Animations API（JS精细控制） #

如果需要在动画过程中添加回调、动态调整参数，用原生Web Animations API实现，无需大量CSS。

修改后的代码 #

<!-- HTML 保持不变 -->
<div class="container">
  <div class="first">
    <p> Hello world</p>
  </div>
  <div class="second">
     <p> Goodbye World</p>
  </div>
</div>
<button class="button1" >Apply</button>

.container {
  display: flex; 
  align-items: center;
  justify-content: space-around;
  width: 100%; 
  background: red;
}

.second {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: scale(0.9);
}

const button = document.querySelector(".button1");
const content = document.querySelector(".second");
let isVisible = false;

button.addEventListener("click", async function() {
  if (isVisible) {
    // 执行隐藏动画
    await content.animate([
      { maxHeight: "100px", opacity: 1, transform: "scale(1)" },
      { maxHeight: "0", opacity: 0, transform: "scale(0.9)" }
    ], {
      duration: 400,
      easing: "ease-in-out"
    }).finished;
    content.style.maxHeight = "0"; // 动画结束后保持隐藏状态
  } else {
    // 执行显示动画，中间帧添加弹跳效果
    content.style.maxHeight = "100px"; // 先解除高度限制
    await content.animate([
      { opacity: 0, transform: "scale(0.9)" },
      { opacity: 1, transform: "scale(1.05)" }, // 弹跳峰值
      { opacity: 1, transform: "scale(1)" }
    ], {
      duration: 600,
      easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
    }).finished;
  }
  isVisible = !isVisible;
});

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