Html 当元素可见时CSS会对JS动画作出反应

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

我有以下效果

.container{
显示器：flex；
弯曲方向：立柱；
}
#盒子{
显示：内联块；
宽度：100px；
高度：100px；
背景色：红色；
过渡：所有800毫秒都容易进入；
位置：相对位置；
右图：calc（100px-100%）；
}
#chk：选中~#框{
右：0；
}

检查输入以查看效果

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

使用CSS+ReactJS，我解决了以下问题： 我使用了一个复选框来选中或取消选中，这取决于滚动的位置。然后使用CSS只需更改文本的呈现位置

CSS代码：

#谁的标题{
显示：内联块；
-webkit过渡：所有800ms易用性；
-moz转换：所有800ms的易用性；
过渡：所有800毫秒都容易进入；
位置：相对位置；
右图：-38%；
}
#WhoIAm chk：选中#WhoIAm title{
右：38%；
}

js代码：

componentDidMount（）{
window.addEventListener（'scroll'，（）=>{
如果（event.srcmelement.body.scrollTop>=620&&event.srcmelement.body.scrollTop=820 | | event.srcmelement.body.scrollTop我真的不知道怎么做…你有没有一个例子？你不知道什么？如何在类中编写css，或者如何在元素可见时用react切换类？这里是jQuery类切换的小摆弄。你不需要o找出如何检测元素是否可见，然后将类添加到框元素中。谢谢，正如我在问题中解释的那样，我不喜欢使用JQuery。看看我自己的答案，看看我是如何解决的。为什么不将类绑定到动画框而不是绑定复选框的状态。不知道react的语法，但在vue.js中我会这么做它是这样的：Where box visible是一个布尔属性，类似于您的“checked”状态。当box visible为true时，这将向您的box添加一个类，当它返回false时将其隐藏。