在 React 中滚动时使用淡入淡出动画更改背景颜色答案

【问题标题】：Changing background color with fade animation on scroll in React在 React 中滚动时使用淡入淡出动画更改背景颜色
【发布时间】：2021-07-06 08:40:19
【问题描述】：

有没有办法在 React 中通过 fade 滚动动画来实现改变背景颜色？我可以在滚动上实现背景变化效果，但我无法添加淡入淡出效果。

import React from "react";

export default class ScrollBackground extends React.Component {
  state = {
    bgcolor: "black",
    color: "white",
  };

  listenScrollEvent = (e) => {
    if (window.scrollY < 5300) {
      return this.setState({
        bgcolor: "black",
        color: "white",
        opacity: 1 - window.scrollY / 5300,
      });
    } else {
      return this.setState({ bgcolor: "white", color: "black", opacity: 0 });
    }
  };

  componentDidMount() {
    window.addEventListener("scroll", this.listenScrollEvent);
  }
  render() {
    return (
      <div
        style={{
          background: this.state.bgcolor,
          color: this.state.color,
          height: "800px",
        }}
      >
        <div id="header">
          <h1>fsefd</h1>
        </div>
        <div id="section_1" className="section">
          This is section 1
        </div>

        <div id="section_2" className="section">
          This is section 2
        </div>
        <div id="section_5" className="section">
          This is section 5
        </div>
      </div>
    );
  }
}

【问题讨论】：

@AjeetShah，供您参考，我在我的问题中添加了我的代码。

标签： javascript css reactjs css-transitions

【解决方案1】：

您需要使用CSS transition，例如：transition: "background-color 0.5s ease"。创造褪色效果。

CSS 过渡提供了一种在更改 CSS 属性时控制动画速度的方法。您可以使属性更改在一段时间内发生，而不是让属性更改立即生效。

例如，如果您将元素的颜色从白色更改为黑色，通常变化是瞬时的。使用 CSS 过渡启用时，变化发生在加速后的时间间隔内曲线，都可以自定义。

另外，别忘了使用debounce。演示：

const { debounce } = _;
const { Component } = React;

class App extends Component {
  state = {
    bgcolor: "black",
    color: "white",
  };

  listenScrollEvent = debounce((e) => {
    if (window.scrollY < 400) {
      return this.setState({
        bgcolor: "black",
        color: "white",
        opacity: 1 - window.scrollY / 5300,
      });
    } else {
      return this.setState({ bgcolor: "white", color: "black", opacity: 0 });
    }
  }, 50);

  componentDidMount() {
    window.addEventListener("scroll", this.listenScrollEvent);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.listenScrollEvent);
  }

  render() {
    return (
      <div
        style={{
          background: this.state.bgcolor,
          transition: "background-color 0.5s ease",
          color: this.state.color,
          height: 1000,
        }}
      >
        <div id="header">
          <h1>fsefd</h1>
        </div>
        <div id="section_1" className="section">
          This is section 1
        </div>

        <div id="section_2" className="section">
          This is section 2
        </div>
        <div id="section_5" className="section">
          This is section 5
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.body)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

【讨论】：