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构建我的应用程序时，不推荐使用JQuery社区和Facebook。

我想使用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>
  );
}