将居中文本过渡到左/右边缘而不会溢出答案

【问题标题】：Transition centered text to left / right edges without overflowing将居中文本过渡到左/右边缘而不会溢出
【发布时间】：2018-08-19 21:12:48
【问题描述】：

我能够将 text-align 从 center 转换为 left。使用此代码，如果您运行它，然后将鼠标悬停在上面，您会看到最上面的代码向左移动。然而，right 的底部溢出；我怎样才能弄清楚如何使过渡到right 不溢出？

注意：这是我的真实应用程序的演示，它具有未知/可变宽度的字符串/元素，从 1 到填充单行的任何内容（不换行）。

.header {
  position: fixed;
  width: 70%;
  background-color: springgreen;
}
.title {
  text-align: center;
}
.menu {
  text-align: center;
}
.trans-left {
  transition: margin-right 1s;
}
.trans-right {
  transition: margin-left 1s;
}
.header:hover .trans-left {
  margin-right: 100%;
}
.header:hover .trans-right {
  margin-left: 100%;
}

<body>
  <div class='header'>
    <div class='title'>
      <span class='trans-left'>This one goes left</span>
    </div>
    <div class='menu'>
      <span class='trans-right'>This one goes right</span>
    </div>
  </div>
</body>

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

您正在像这样对齐文本元素：

margin-left: 100%;
margin-right: 100%;

这会将每个元素（从框的起点）定位到左右边缘。

因此，左移框的左边缘将与容器的左边缘对齐。

并且右移框的左边缘会与容器的右边缘对齐。这会导致此框的其余部分溢出。

试试这个：

margin-right: 90%; /* adjust as needed */

根据修改后的问题进行编辑

这是一个替代解决方案，无论内容宽度如何。

.header {
  position: fixed;
  width: 70%;
  background-color: springgreen;
}
.title, .menu {
  text-align: center;
  position: relative;
  width: 100%;
  height: 50px;
}
.trans-left {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: 1s;
}
.trans-right {
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  transition: 1s;
}
.header:hover .trans-left {
  left: 0;
  transform: translateX(0);
  transition: 1s;
}
.header:hover .trans-right {
  right: 0;
  transform: translateX(0);
  transition: 1s;
}

<div class="header">
  <div class="title">
    <span class="trans-left">This one goes left</span>
  </div>
  <div class="menu">
    <span class="trans-right">This one goes right</span>
  </div>
</div>

【讨论】：

嗨迈克尔，是的，如果我减少它的工作百分比，但是宽度未知，这是我应用它的一个小例子，它是数百个，它们都是不同的宽度。所以 70% 适用于 20+ 个字符串，但不适用于 1 个字符串。 :(
哇非常感谢@Micahel 我会玩它，这种新方法似乎好多了！它不仅适用于文本。谢谢！
你的方法真好！它尊重过渡时间 100% 非常感谢！ margin-right 方法会将其推至 100%，但不遵守转换时间，因为 100% 会溢出。哇，谢谢！