点击按钮展开div后关闭及二次打开无CSS transition过渡问题求助

核心问题根因 #

• 关闭无动画：关闭函数直接移除了visibility的显示类，属性立刻生效覆盖了过渡效果，且没有先触发尺寸收缩的类变更
• 二次打开无动画：首次关闭后未清理bigger类，再次打开时元素已经是全屏状态，没有过渡空间

代码修改 #

调整后的JS逻辑 #

// 存储动画时长，和CSS里的transition保持一致
const ANIM_DURATION = 1000
let closeTimer = null

function big() {
  const content = document.getElementById("content")
  const originBtn = document.querySelector('.button > button')
  // 清理未执行完的关闭定时器，避免操作冲突
  if (closeTimer) clearTimeout(closeTimer)
  // 隐藏原始按钮，强化按钮变形为内容的视觉效果
  originBtn.style.visibility = 'hidden'
  // 先标记为可见，下一帧再添加展开类，强制浏览器触发过渡
  content.classList.add('show')
  requestAnimationFrame(() => {
    content.classList.add('bigger')
  })
  delayed()
}

function small() {
  const content = document.getElementById("content")
  const originBtn = document.querySelector('.button > button')
  const testo = document.getElementById("testo")
  // 先隐藏文本
  testo.classList.remove('show')
  // 移除展开类，触发收缩过渡
  content.classList.remove('bigger')
  // 等收缩动画执行完成后，再隐藏内容、显示原始按钮
  closeTimer = setTimeout(() => {
    content.classList.remove('show')
    originBtn.style.visibility = 'visible'
  }, ANIM_DURATION)
}

function delayed() {
  setTimeout(function(){
    document.getElementById("testo").classList.add('show')
  }, ANIM_DURATION + 100)
}

可选CSS优化（文本显隐更自然） #

在原有CSS基础上补充以下规则：

#testo {
  visibility:hidden;
  /* 新增过渡规则 */
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#testo.show {
  opacity: 1;
  visibility: visible !important;
}

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