html - 动态从右到左的CSS动画

Question

我面临的问题是:

• 我有一个从右到左的动画文本，该文本会根据语言设置而变化，导致文本总宽度也发生变化的原因。

在这张图片中，我想要的效果很好，因为一些属性是固定的。

现在，当我更改为更长的文本时，问题就出现了。

所以，这就是我现在拥有的:

这就是我想要的:

这是我使用的代码:

ReactJS 方面:

constructor(props) {
  super(props);

  this.state = {
    checked: false
  }
}

componentDidMount() {
  window.addEventListener('scroll', () => {
    if (event.srcElement.body.scrollTop >= 1400) {
      this.setState({ checked: true });
    }
  });
}

render() {
  return (
    <div>
      ... stuff
      <span style={{ fontSize: "40px", color: this.state.theme.COLOR_3 }}>
        <input type="checkbox" id="Resume-chk" style={{ display: "none" }} checked={this.state.checked} />
        <b id="Resume-title">{this.state.languageSet.RESUME}</b>
      </span>
      ... more stuff
    <div>
  );
}

CSS 端:

//This is the text
#Resume-title {
  display: inline-block;
  -webkit-transition: color 200ms ease-in;
  -moz-transition: color 200ms ease-in;
  transition: color 200ms ease-in;

  -webkit-transition: right 500ms ease-in;
  -moz-transition: right 500ms ease-in;
  transition: right 500ms ease-in;

  position: relative;
  right: -40.5%;
}

//This is the text when the checkbox is checked
#Resume-chk:checked ~ #Resume-title {
  right: 40.5%;
}

所以，问题是:如何修复它？或者我可能缺少一些概念，它不仅仅是修复一个错误。

我也不确定做 right: -40.5%; 和 right: 40.5%; 这样的事情是否是个好习惯，但我找不到办法为 float 或 align 等属性设置动画。

当然，如果有办法解决，还有办法做得更好，也欢迎!!!

已编辑:here包含整个 html 部分的 fiddle ，从开发控制台复制

Answer 1

您需要结合使用 right 和转换进行定位。

这是根据您的要求调整元素居中的常用想法:

.container {
  width: 300px;
  background-color: lime;
  margin: 10px;
  position: relative;
}

.item {
  display: inline-block;
  position: relative;
  right: -100%;
  transform: translateX(-100%);
  transition: right 1s, transform 1s;
}

.container:hover .item {
  right: 0%;
  transform: translateX(0%);
}

<div class="container">
  <div class="item">Item</div>  
</div>
<div class="container">
<div class="item">Item long</div>
</div><div class="container">
  <div class="item">Item longer longer</div>
</div>