如何通过JavaScript变量设置CSS高度，解决Slick滑块过渡失效问题

核心问题原因 #

• 你获取offsetHeight时，元素正处于height:0的状态，拿到的高度值本身就是0，设置后自然没有效果
• 未给元素添加transition过渡属性，高度修改不会产生动画效果
• 未绑定Slick滑块的专属事件，代码执行时机不对，可能选中未更新的旧激活元素
• 缺失overflow:hidden配置，高度为0时内容仍会溢出显示

调整步骤 #

第一步：修改CSS配置 #

.specialist-description-wrapper {
  height: 0;
  overflow: hidden;
  /* 过渡时长可按需调整 */
  transition: height 0.3s ease;
}
/* 删除原.slick-current.slick-active下的固定高度配置，改为JS动态赋值 */

第二步：修正JS逻辑并绑定Slick事件 #

需要绑定Slick的afterChange事件（滑块切换完成后触发），通过临时重置高度的方式获取真实内容高度，再触发过渡：

// 将下方选择器替换为你实际的Slick滑块容器选择器
$('.slick-slider').on('afterChange', function(event, slick, currentSlide) {
  // 收起所有非激活状态的描述框
  const allWrappers = document.querySelectorAll('.specialist-description-wrapper')
  allWrappers.forEach(wrap => wrap.style.height = '0px')

  // 获取当前激活的描述框
  const activeWrapper = document.querySelector('.slick-current.slick-active .specialist-description-wrapper')
  if (!activeWrapper) return

  // 临时设置高度为auto获取真实内容高度
  activeWrapper.style.height = 'auto'
  const realHeight = `${activeWrapper.offsetHeight}px`
  // 立刻切回0高度准备触发过渡，浏览器不会重绘因此无闪烁
  activeWrapper.style.height = '0px'

  // 等待浏览器重绘完成后设置真实高度，触发过渡动画
  requestAnimationFrame(() => {
    activeWrapper.style.height = realHeight
  })

  // 可选：过渡完成后将高度改回auto，适配窗口 resize 场景
  activeWrapper.addEventListener('transitionend', function handleEnd() {
    if (activeWrapper.style.height === realHeight) {
      activeWrapper.style.height = 'auto'
      activeWrapper.removeEventListener('transitionend', handleEnd)
    }
  })
})

注意事项 #

• 事件绑定需要在Slick滑块初始化完成后执行，避免绑定失效
• 如果描述内容包含图片，需要等待图片加载完成后再计算高度，否则会出现高度计算偏差，可提前给图片设置固定宽高比规避该问题
• 如果需要适配窗口大小变化，可监听resize事件，在当前激活项高度为auto时重新计算高度并刷新过渡

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