如何在文本变更时实现span元素的宽度过渡动画？

我尝试实现文本淡入淡出过渡效果，代码如下：

It's <span id="change">a bird!</span>

#change {
  padding: 0 0.5rem;
  background-color: red;
  border-radius: 3px;
  color: white;
  transition: all;
}

.fadeout {
  color: transparent !important;
}

let change = document.querySelector("#change")
let transition_duration = 2000

let title = ["a plane!", "Superman!", "a bird!"]
let i = 0

setInterval(async() => {
  change.style.transitionDuration = (transition_duration / 2000) + 's'
  change.classList.add("fadeout")

  setTimeout(() => {
    change.classList.remove("fadeout")
    change.innerText = title[i];
    i = (i + 1) % title.length
  }, transition_duration / 2);

}, 3000)

但切换文本内容时，<span>元素的宽度直接突变，没有过渡效果，请问如何解决？

问题原因 #

1. <span>是行内元素，宽度由内容即时决定，内容切换时宽度瞬间变化，无法触发过渡
2. 当前仅针对color属性做了过渡，未处理宽度变化

两种可行解决方案 #

方案一：固定宽度再过渡（适合内容长度接近的场景） #

把<span>转为inline-block，显式添加宽度过渡，切换内容前先固定当前宽度，修改内容后再释放宽度让它自然过渡：

修改后CSS

#change {
  display: inline-block; /* 转为块级行内元素，支持宽度过渡 */
  padding: 0 0.5rem;
  background-color: red;
  border-radius: 3px;
  color: white;
  transition: all 1s ease; /* 明确过渡属性和时长 */
}

.fadeout {
  color: transparent;
  background-color: transparent; /* 背景也同步过渡 */
}

修改后JS

let change = document.querySelector("#change")
let transition_duration = 2000

let title = ["a plane!", "Superman!", "a bird!"]
let i = 0

setInterval(() => {
  // 先固定当前元素的宽度
  change.style.width = change.offsetWidth + 'px';
  
  // 触发淡出
  change.classList.add("fadeout")

  setTimeout(() => {
    // 更新文本内容
    change.innerText = title[i];
    i = (i + 1) % title.length;
    
    // 移除固定宽度，让元素过渡到新内容的宽度
    change.style.width = '';
    // 移除淡出类，触发淡入
    change.classList.remove("fadeout")
  }, transition_duration / 2);

}, 3000)

方案二：双元素重叠切换（适合内容长度差异大的场景） #

用两个重叠的<span>，一个显示当前文本，一个准备下一个文本，通过透明度切换实现平滑过渡，父元素宽度会自动跟随内容变化：

修改后HTML

It's <div class="text-switcher">
  <span id="current" class="active">a bird!</span>
  <span id="next"></span>
</div>

修改后CSS

.text-switcher {
  position: relative;
  display: inline-block;
}

.text-switcher span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 0.5rem;
  background-color: red;
  border-radius: 3px;
  color: white;
  transition: opacity 1s ease;
}

.text-switcher .active {
  opacity: 1;
  position: static; /* 静态位置，撑住父元素宽度 */
}

.text-switcher .fadeout {
  opacity: 0;
}

修改后JS

let current = document.querySelector("#current")
let next = document.querySelector("#next")
let transition_duration = 2000

let title = ["a plane!", "Superman!", "a bird!"]
let i = 1 // 从第二个内容开始切换

setInterval(() => {
  // 设置下一个要显示的文本
  next.innerText = title[i];
  i = (i + 1) % title.length;
  
  // 当前文本开始淡出
  current.classList.add("fadeout")
  
  setTimeout(() => {
    // 切换两个元素的显示状态
    current.classList.remove("active", "fadeout")
    next.classList.add("active")
    
    // 交换元素引用，方便下次循环
    [current, next] = [next, current]
  }, transition_duration);

}, 3000)

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