javascript - 如何预测 HTML 元素的宽度以便在不透明度和宽度上进行 CSS 转换？

Question

• 我正在处理一个带有 innerText 的 span 节点。
• 在运行时，我将更改 innerText，因此节点的 offsetWidth 会发生变化，具体取决于 future 的 innerText 长度。
• 我需要预见 future -offsetWidth，以便通过 CSS 处理宽度本身的transition。
• 在这种情况下，特别是，我需要在 opacity 和 width both 上做一个transition > span 元素，所以我无法立即更改 inneText。

如何预测 width 的准确值？

更一般地说，有一种方法可以“模拟”DOM 更改以了解future-CSS-properties？

可能的起始代码片段

let h1 = document.getElementsByTagName("h1")[0];
let span = document.getElementsByTagName("span")[0];
h1.addEventListener("click", function() {
  if(span.innerText == "Better") {
    span.innerText = "Awsome";
  } else {
    span.innerText = "Better";
  }
})

h1 span {
  border: 1px solid red;
  display: inline-block;
  padding: 4px;
  transition-property: all;
}

<h1>Hello <span>Awsome</span> World!</h1>

Answer 1

正如我在评论中提到的，您可以克隆该元素，将其内容设置为您想要的内容，并测量其宽度。然后，您可以将原始宽度更改为从克隆元素获得的宽度。

像这样:

let h1 = document.getElementsByTagName("h1")[0];
let span = document.getElementsByTagName("span")[0];
span.style.width = `${span.clientWidth}px`;
h1.addEventListener("click", function() {
  const nextWord = getNextWord();
  const featureWidth = getFeatureWidth(nextWord);
  span.style.color = 'rgba(0, 0, 0, 0)';
  span.style.width = `${featureWidth}px`;
  setTimeout(() => {
    span.textContent = nextWord;
    span.style.color = 'rgba(0, 0, 0, 1)';
  }, 300);
});

function getNextWord() {
  if(span.innerText == "Better") {
    return "Awsome";
  }
  return "Better";
}

function getFeatureWidth(word) {
  const clonedSpan = document.createElement('span');
  clonedSpan.setAttribute('style', 'position: absolute;z-index: -1');
  clonedSpan.textContent = word;
  h1.appendChild(clonedSpan);
  const width = clonedSpan.clientWidth;
  h1.removeChild(clonedSpan);
  return width;
}

h1 span {
  border: 1px solid red;
  display: inline-block;
  padding: 4px;
  transition: all .3s ease;
}

<h1>Hello <span>Awsome</span> World!</h1>