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

Posted 2023-02-22

【中文标题】React：使用 Animate on Scroll 库条件渲染 CSS 类

【英文标题】：React: Conditional rendering CSS classes with Animate on Scroll library

【发布时间】：2019-11-23 03:57:12

【问题描述】：

我在一个项目中使用 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>

这样做的正确方法是什么？

【参考方案1】：

用div标签封装代码

   <div style= /*your media queries */  ></div>

【参考方案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

【讨论】：

当使用上面的演示链接尝试调整输出部分宽度。

【参考方案3】：

`const showAnimation = window.innerWidth > 700

data-aos=showAnimation ?"": "fade-in"`