使用 state 在反应组件中动态样式化元素

Question

Hi I am trying to add a matrix3d value to the h1 which will update on scroll and move the h1, however it doesn't seem to have any effect a but I can see in the console log that the values are indeed changing when I log this.state.transform, can anyone advice me on where I'm going wrong please

import styles from "./marquee.module.scss";

class Marquee extends Component {
  componentDidMount() {
    window.addEventListener("scroll", this.renderMatrix, { passive: true });
  }

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

  renderMatrix = () => {
    const distanceFromTop = window.pageYOffset;
    this.setState({
      transform: `matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ${distanceFromTop}, 0, 0, 1)`,
    });
    console.log(this.state.transform)
  };

  render() {
    return (
      <div>
        <h1 className={styles.marquee} style={{ transform: this.state.transform }}>
          DESIGNER UI DESIGNER UI DESIGNER
        </h1>
        <h2>DESIGNER UI DESIGNER UI DESIGNER</h2>
        <h2>DESIGNER UI DESIGNER UI DESIGNER</h2>
      </div>
    );
  }
}

export default Marquee;

Answer 1

Issue

this.state.transform is initially undefined, so style={{ transform: this.state.transform }} fails.

Solution

Define initial state

state = {
  transform: `matrix3d(
    1, 0, 0, 0, 
    0, 1, 0, 0, 
    0, 0, 1, 0, 
    0, 0, 0, 1)`,
}