Question

我想进行一些文本替换，其中一个子字符串淡入，另一个子字符串淡出。我的想法是必须“重叠”跨度并为opacity设置动画。

    <p>
      This is the 
      <span style="position: relative;">
        <span style="position: absolute;">wrong</span>
        <span style="position: absolute;" class="hidden">correct</span>
      </span> 
      answer.
    </p>

我希望wrong和correct重叠，并且周围的<span>元素具有最长单词的宽度。但是周围的元素的宽度为0，导致单词answer也重叠。

是否有一种解决方法来尊重绝对定位的元素的宽度？假设它们具有动态内容，因此您无法确定哪一个最长。

edit：经过一番环顾之后，似乎是这样：position: relative的跨度没有内容，因此将没有宽度。内部跨度将自动成为块，因为它们的位置绝对正确。您可以给它们一个宽度，但这不会影响外部跨度。我想。

Answer 1

使用position: absolute从普通文档流中删除一个元素。该元素将不再影响文档中其他元素的布局。当文本节点answer被绝对定位的元素覆盖时，该元素将不占用垂直或水平空间。

对此的一种解决方案是仅在两个position: absolute中最短的时候使用span。然后，您可以通过更改元素的不透明度来隐藏或显示正确的span：

var el = document.querySelector('.result-wrap');

document.querySelector('button').addEventListener('click', function() {
    el.classList.toggle('show-negative');
    el.classList.toggle('show-positive');
});

.result-wrap {
  position: relative;
}

.result {
  opacity: 0;
  transition: all 1s ease;
}

.result-negative {
  position: absolute;
  left: 0;
}

.show-negative .result-negative,
.show-positive .result-positive{
  opacity: 1;
}

.show-negative .result-positive
.show-positive .result-negative{
  opacity: 0;
}

<p>
  This is the 
  <span class="result-wrap show-positive">
    <span class="result result-negative">wrong</span>
    <span class="result result-positive">correct</span>
  </span> 
  answer.
</p>

<button type="button">
Toggle result
</button>

Answer 2

使容器跨过inline-flex方向列

这将垂直堆叠内部跨度

然后将这些高度设置为0，以便它们共享相同的垂直位置：

.container {
    display: inline-flex;
    flex-direction: column;
}

.item {
    height: 0px;
}

<p>
      This is the 
      <span class="container">
        <span class="item">wrong</span>
        <span class="item hidden">correct long</span>
      </span> 
      answer.
    </p>

Answer 3

更新的代码段

var el = document.querySelector('.wrapper'),
correct = document.querySelector('.correct'),
wrong = document.querySelector('.wrong'),
cW = correct.offsetWidth,
wW = wrong.offsetWidth,
btn = document.querySelector('.btn')

correct.style.position = "absolute";
correct.style.top = 0;
wrong.style.position = "absolute";
wrong.style.top = 0;

function checklonger () {
if (el.classList.contains('show-correct')) {
     el.style.width= cW + 'px';
}
else {
     el.style.width= wW + 'px';
}
}
checklonger ();

btn.addEventListener('click', function() {
   el.classList.toggle('show-correct');
   el.classList.toggle('show-wrong');
   checklonger();
});

p {
  position:relative;
}
.wrapper {
  display: inline-block;
  transition: all 1s ease;

}
.correct, .wrong {
  opacity:0;
  transition: all 1s ease;
}
.show-correct .correct, .show-wrong .wrong  {
    opacity:1;
}

<p>
      This is the
      <span class='wrapper show-correct'>
        <span class="correct">correct</span>
        <span class="wrong">wrong </span>

      </span> 
    answer
    </p>

<button class="btn">toggle</button>

不遵守绝对定位元素的宽度

3 个答案: