Question

我将Animate on Scroll库和React-Bootstrap用于项目。使用以下代码应用动画：

      <Row>
        <Col xs={{span: 12}} 
             md={{span: 8, offset: 2}}                               
             data-aos="fade-right">
          <H2>Header</H2>
          <P>
            paragraph content
          </P>
        </Col>
      </Row>

data-aos="fade-right"正确应用动画。但是，我只希望动画与用户一起在桌面上查看网站时一起应用。我熟悉媒体查询，但是不确定如何应用此data-aos="fade-right"，以便仅在台式机而不是平板电脑或移动设备上应用它。

我可以使用React的条件渲染仅在浏览器宽度为786px +时应用data-aos="fade-right"吗？

如何抓住浏览器的宽度，确保它等于或大于768px，然后将data-ose="fade-right"应用于Bootstrap Col，以便动画仅在大屏幕上运行？

我尝试在三元运算符中使用window.innerWidth，但有一些错误：

      <Row>
        <Col xs={{span: 12}}
             md={{span: 8, offset: 2}}
             {`${window.innerWidth > '700px' ? "data-aos="fade-right"" : ""}`}>
          <H2>Header</H2>
          <P>
            paragraph content
          </P>
        </Col>
      </Row>

执行此操作的正确方法是什么？

Answer 1

使用

用div标签封装代码

text.yview

Answer 2

您需要使用div之类的包装器包装内容，然后使用条件渲染，

条件

const showAnimation = window.innerWidth > 700

用法

<Row>
   <Col xs={{span: 12}} md={{span: 8, offset: 2}}>
     {showAnimation ? (
        <div className="aos-animate" data-aos="fade-right">
          <h2>Header</h2>
          <p>paragraph content</p>
        </div>
     ) : (
        <div>
          <h2>Header</h2>
          <p>paragraph content</p>
        </div>
     )}
   </Col>
</Row>

Demo

Answer 3

`const showAnimation = window.innerWidth> 700

data-aos = {showAnimation？“”：“淡入”}`

React：在Scroll库上使用Animate条件渲染CSS类

3 个答案: