CSS-ReactJS 动画，当元素可见时

Question

我不知道我想要的是否可以通过纯CSS实现，我宁愿避免使用JQuery，因为我正在使用ReacJS构建我的应用程序。

我有以下效果

.container {
  display: flex;
  flex-direction: column;
}
#box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 800ms ease-in;
  position: relative;
  right: calc(100px - 100%);
}
#chk:checked ~ #box{
  right: 0;
}

<div class="container">
  <label>check the input to see the effect</label>
  <br/>
  <input id="chk" type="checkbox">
  <div id="box"></div>
</div>

当

选中输入（复选框）时它有效，问题是我想重现相同的效果，但是当屏幕上显示元素时。

为什么不使用JQuery？

由于我使用ReactJS构建我的应用程序，因此不建议社区和Facebook使用JQuery。

我想使用CSS一些React组件，但我不知道如何。

检查我自己的答案，看看我是如何弄清楚的

Answer 1

为什么不创建一个类而不是带有 checked 属性的选择器，然后使用 react 切换类。

Answer 2

使用 CSS + ReactJS 我解决了这样做的问题：

我使用复选框来选中或取消选中，具体取决于滚动的位置。然后使用 CSS 只需更改文本的呈现位置即可。

CSS代码：

#WhoIAm-title {
  display: inline-block;
  -webkit-transition: all 800ms ease-in;
  -moz-transition: all 800ms ease-in;
  transition: all 800ms ease-in;
  position: relative;
  right: -38%;
}
#WhoIAm-chk:checked ~ #WhoIAm-title {
  right: 38%;
}

ReactJS 代码：

componentDidMount() {
  window.addEventListener('scroll', () => {
    if (event.srcElement.body.scrollTop >= 620 && event.srcElement.body.scrollTop <= 650) {
      this.setState({ checked: true });
    }else if (event.srcElement.body.scrollTop >= 820 || event.srcElement.body.scrollTop <= 600) {
      this.setState({ checked: false });
    }
  });
}
render() {
  return (
    <div id="whoiam" className="Container column">
      <span>
        <input type="checkbox" id="WhoIAm-chk" style={{ display: "none" }} checked={this.state.checked} />
        <b id="WhoIAm-title">Title to toggle to right</b>
      </span>
    </div>
  );
}