元素可见时的 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

您为什么不创建一个类而不是具有选中属性的选择器，然后使用 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>
  );
}