元素在转换时移离当前位置

Question

我有一个单词要添加两个字母。这两个字母应该位于单词内的某个位置（不是在开头或结尾），并且也应该在悬停时淡入单词中。 这个词直接放置在我页面的主包装元素中，这是一个

flex

主体。该单词本身必须有一个

fixed

位置，并且必须“垂直”放置在屏幕的左上角。我无法将 width: 100%; 之类的内容应用于元素，因为这样它就不会在所有屏幕尺寸上粘在同一位置。但是，一旦我将鼠标悬停在该单词上，它就会移出其位置，尽管它不应该这样做。从技术上讲，它应该只以使其自己的容器稍大一些的方式扩展，以便两个新字母适合。

截至目前，我正在尝试使用

transition

来实现字母的插入：

.main-element {     /* h1 */
    position: fixed;
    ...
}
.element-to-appear {     /* span */
    position: absolute;
    opacity: 0;
    transition: opacity .5s;
}
.main-element:hover .element-to-appear {
    opacity: 1;
}

在上面的示例中，

main-element

是单词，

element-to-appear

是要插入的两个字母（包含在主文本中的

<span>

元素中）。此外，我还推开了该单词的最后几个字符（也包含在

<span>

中），以便为新字母腾出空间：

.main-element:hover .remaining-letters {     /* span */
    margin-left: -10px
}

这也是我想要实现的目标的一个小例子：

为了解决这个问题，我已经尝试了以下方法，希望这会导致插入两个字母而文本不会移出其位置：

更改悬停时的

display
• 值：我尝试将字母上的显示值从

  none

  更改为

  inline-block

  ，这使得字母出现，但问题仍然存在。我尝试了前面提到的
transition
• 方法，利用了

  opacity

  和

  position: absolute;

  。我尝试更改元素的
width
• 以适合整个屏幕，但这不适用于任何其他屏幕尺寸。我尝试对父级应用不同的
display
• 值，这完全破坏了悬停效果。我尝试了除了
fixed
• 之外的其他定位方法，但问题依然存在。我尝试将
::before
• 应用于包含要插入的字母后面的字母的范围，一开始这似乎有点工作，但我不得不为

  <span>

  分配奇怪的边距，这使得整个文本“在恢复正常之前“跳”出位置一秒钟 - 我真的很想避免这样的事情。最终，我还为文本分配了边距，这会在悬停时将其移回原位，但这使整个过渡再次看起来“跳跃”。
这是与问题相关的完整代码：

JSFiddle

（由于某种原因我无法创建堆栈片段，所以我也制作了一个 JSFiddle 并仅提供了代码块）

HTML

：

<div class="wrapper">
    <h1 class="main-element">test-wor<span id="element-to-appear">rr</span><span id="remaining-letters">d.</span></h1>
</div>

CSS

：

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
}
.main-element {
    position: fixed;
    left: 100px;
    top: -100px;
    rotate: 90deg;
    color: black;
}
#element-to-appear {
    display: inline-block;
    position: absolute;
    opacity: 0;
    transition: opacity .5s;
}
#remaining-letters {
    transition: .6s;
}
.main-element:hover #element-to-appear {
    opacity: 1;
}
.main-element:hover #remaining-letters {
    margin-left: 50px;
    transition: .25s;
}

代码片段中应该发生的情况是，元素在不应该的情况下进一步移动到顶部和右侧。它应该保持在相同的位置，但以适合新字母的方式扩展，但元素保持在相同的位置（本质上，它应该只向下扩展）。

我已经尝试了很多，但我不知道还能尝试什么。我愿意使用 JS 和 JQuery 或任何其他工具。

提前感谢您的帮助！

Answer 1

transform-origin: left

添加到您的

.main-element

。尽管看起来旋转后的文本宽度只占用了大约 20 像素，但 DOM 仍然为元素留出了足够的空间，就好像它没有旋转一样。你可以通过

我制作的这个调试示例

清楚地看到它。由于 transform-origin 默认设置为

center

，因此旋转后的元素将保留在 DOM 为其创建的空间的中心。

这是一个工作示例（我调整了一些内容以使其更容易在 Stack Overflow 上查看）：

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
}

.main-element {
  position: fixed;
  /* 
    it might be necessary to run the fiddle without the 'left' and 'top' values once
    and then reassigning them and running it again, it somehow seems to be broken on
    JSFiddle 
    */
  left: 50px;
  top: 10px;
  rotate: 90deg;
  color: black;
  transform-origin: left;
}

#element-to-appear {
  display: inline-block;
  position: absolute;
  opacity: 0;
  transition: opacity .5s;
}

#remaining-letters {
  transition: .6s;
}

.main-element:hover #element-to-appear {
  opacity: 1;
}

.main-element:hover #remaining-letters {
  margin-left: 50px;
  transition: .25s;
}

<div class="wrapper">
  <h1 class="main-element">test-wor<span id="element-to-appear">rr</span><span id="remaining-letters">d.</span></h1>
</div>