Bootstrap 5动态设置Offcanvas位置时首次触发缺失过渡的解决问询

问题根源 #

动态修改Offcanvas的位置类（如offcanvas-start/offcanvas-end）后立即调用show()，浏览器还没完成样式的重排与重绘，Bootstrap的JS无法正确识别元素的初始状态，导致首次显示时过渡动画失效。第二次操作时样式已完成渲染，所以动画正常生效。

可行解决方案 #

方案1：用requestAnimationFrame等待渲染完成 #

在更新类名后，通过requestAnimationFrame延迟初始化并显示Offcanvas，确保浏览器先处理样式变更：

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = null

var openLeftBtnClicked = function(event) {
  myOffcanvas.className = 'offcanvas offcanvas-start'
  if (bsOffcanvas) {
    bsOffcanvas.dispose()
  }
  // 等待浏览器完成渲染后再执行显示逻辑
  requestAnimationFrame(() => {
    bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
    bsOffcanvas.show()
  })
}

var openRightBtnClicked = function(event) {
  myOffcanvas.className = 'offcanvas offcanvas-end'
  if (bsOffcanvas) {
    bsOffcanvas.dispose()
  }
  requestAnimationFrame(() => {
    bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
    bsOffcanvas.show()
  })
}

document.getElementById('openLeftBtn').addEventListener('click', openLeftBtnClicked)
document.getElementById('openRightBtn').addEventListener('click', openRightBtnClicked)

方案2：强制触发重绘 #

修改类名后，通过读取元素的offsetWidth强制浏览器触发重排，让新样式立即生效：

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = null

var openLeftBtnClicked = function(event) {
  myOffcanvas.className = 'offcanvas offcanvas-start'
  // 强制触发重绘，确保样式更新
  void myOffcanvas.offsetWidth
  
  if (bsOffcanvas) {
    bsOffcanvas.dispose()
  }
  bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
  bsOffcanvas.show()
}

var openRightBtnClicked = function(event) {
  myOffcanvas.className = 'offcanvas offcanvas-end'
  void myOffcanvas.offsetWidth
  
  if (bsOffcanvas) {
    bsOffcanvas.dispose()
  }
  bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
  bsOffcanvas.show()
}

document.getElementById('openLeftBtn').addEventListener('click', openLeftBtnClicked)
document.getElementById('openRightBtn').addEventListener('click', openRightBtnClicked)

方案3：关闭后再切换位置（适合需切换已打开面板的场景） #

如果需要在Offcanvas已打开时切换位置，先等待面板完全关闭后再修改类名：

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

var openLeftBtnClicked = function(event) {
  if (myOffcanvas.classList.contains('show')) {
    bsOffcanvas.hide()
    // 监听关闭完成事件，避免视觉冲突
    myOffcanvas.addEventListener('hidden.bs.offcanvas', function handler() {
      myOffcanvas.className = 'offcanvas offcanvas-start'
      bsOffcanvas.dispose()
      bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
      bsOffcanvas.show()
      myOffcanvas.removeEventListener('hidden.bs.offcanvas', handler)
    }, { once: true })
  } else {
    myOffcanvas.className = 'offcanvas offcanvas-start'
    bsOffcanvas.dispose()
    bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
    bsOffcanvas.show()
  }
}

var openRightBtnClicked = function(event) {
  if (myOffcanvas.classList.contains('show')) {
    bsOffcanvas.hide()
    myOffcanvas.addEventListener('hidden.bs.offcanvas', function handler() {
      myOffcanvas.className = 'offcanvas offcanvas-end'
      bsOffcanvas.dispose()
      bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
      bsOffcanvas.show()
      myOffcanvas.removeEventListener('hidden.bs.offcanvas', handler)
    }, { once: true })
  } else {
    myOffcanvas.className = 'offcanvas offcanvas-end'
    bsOffcanvas.dispose()
    bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
    bsOffcanvas.show()
  }
}

document.getElementById('openLeftBtn').addEventListener('click', openLeftBtnClicked)
document.getElementById('openRightBtn').addEventListener('click', openRightBtnClicked)

关键说明 #

• requestAnimationFrame会在浏览器下一次重绘前执行回调，保证样式变更已生效。
• void myOffcanvas.offsetWidth是触发重排的常用技巧，能让浏览器立即应用新样式，从而触发过渡动画。
• 若需切换已打开的Offcanvas位置，必须等待其完全关闭后再修改类名，避免出现错位或无动画的异常。

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