如何在React中停止文本更改的跳跃插孔

Question

如何在反应中从文本平滑过渡到svg。当我单击图片中显示为“>”的下一个按钮时，文本将更改为svg。但是由于整体高度的变化，会有某种跳跃。我如何才能在两者之间平稳过渡。

注意：很遗憾，我不能共享代码，因为这不是个人的项目。

Answer 1

您可以将包含元素的高度设置为最高度的元素。因此，您需要将它们以负的页边空白向右放置，以便它们彼此重叠。当您隐藏其他具有可见性的元素时，将仅显示使您可见的元素。

这里是一个示例：

var elements = document.querySelectorAll('.block__element');

document.querySelector('button').addEventListener('click', () => {
  elements.forEach(element => {
    if(element.classList.contains('block__element--visible')) {
      element.classList.remove('block__element--visible');
    } else {
      element.classList.add('block__element--visible');
    }
  })
});

.block {
  background: #aaa;
  display: flex;
}
.block__element {
  width: 100%;
  margin-right: -100%;
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}
.block__element--visible {
  visibility: visible;
  opacity: 1;
}

<div class="block">
  <div class="block__element block__element--visible">
    <div style="background: #f00">Content 1</div>
  </div>
  <div class="block__element">
    <div style="height: 200px; background: #0f0">Longer content 2</div>
  </div>
</div>
<button>Toggle between elements</button>