CSS动画从右到左动态 [英] CSS Animation from right to left dynamically

问题描述

我面临的问题是:

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

在这张照片中，我想要的效果效果很好，因为某些属性是固定的.

In this picture, the effect I want is working fine, because some properties are fixed.

现在，当我换较长的文字时，问题就出现了.

Now, when I change for a longer text the problem cames up.

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

So, this is what I have now:

这就是我想要的:

这是我正在使用的代码:

Here is the code I'm using:

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%;
}

所以，问题是:如何解决它?也许我缺少一些概念，这不仅仅是修复错误.

So, the question is: How to fix it? Or maybe there is some concept I'm missing and it is a little bit more than just fixing a bug.

我也不确定是否做类似 right:-40.5％; 和 right:40.5％; 这样的事情，但是我找不到办法为诸如 float 或 align 之类的属性设置动画.

Also I'm not sure if doing things like right: -40.5%; and right: 40.5%; is a good practice, but I cant find a way to animate property like float or align.

当然，如果有方法可以修复它，但还有一种方法可以做得更好，这也是值得欢迎的！！

Of course, if there is a way to fix it, but also there is a way to do it even better, It is also welcome!!!

编辑后:此处包含从开发者控制台复制的整个html部分的小提琴>

EDITED: here the fiddle containing the whole html section, copied from dev console

推荐答案

您需要结合使用 right 和定位进行定位.

You need a combination of positioning with right and a transform.

这是使元素居中的一种常用方法，它可以根据您的请求进行调整:

This is an usual idea for centering an element, adapted to your request:

.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>

这篇关于CSS动画从右到左动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！