如何使用react-pose实现动画刻度标记？

npm install react-pose

yarn add react-pose

import posed from 'react-pose';

const ScaleMarker = posed.div({
  start: { scale: 1 },
  end: { scale: 2 }
});

class App extends React.Component {
  state = {
    isAnimated: false
  };

  handleClick = () => {
    this.setState(prevState => ({
      isAnimated: !prevState.isAnimated
    }));
  };

  render() {
    const { isAnimated } = this.state;

    return (
      <div>
        <button onClick={this.handleClick}>Toggle Animation</button>
        <ScaleMarker pose={isAnimated ? 'end' : 'start'} />
      </div>
    );
  }
}

const ScaleMarker = posed.div({
  start: { scale: 1 },
  end: { scale: 2 }
});

const StyledScaleMarker = styled(ScaleMarker)`
  width: 10px;
  height: 100px;
  background-color: red;
`;

class App extends React.Component {
  // ...
  
  render() {
    // ...
    
    return (
      <div>
        <button onClick={this.handleClick}>Toggle Animation</button>
        <StyledScaleMarker pose={isAnimated ? 'end' : 'start'} />
      </div>
    );
  }
}