组件未设置动画

Question

我正在使用反应姿势对我的图像进行动画处理。尽管没有设置动画，它只是将组件的属性切换为最终值。例如，它以不透明度0.5开始，应该在3秒钟内移至1，但立即跳到1。为什么会发生这种情况？

代码：

class ImgComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hovering: false,
      img: props.img
    }
  }
  render() {
    const MyComponent = ({ hostRef }) => <div ref={hostRef} ><img style={{width: '50%'}} src={this.state.img}></img></div>

    const View = posed.div({
      idle: { scale: 1, opacity: 1,
        transition: { duration: 30000 }
       },
      hovered: { scale: 1.5, opacity: 0.3,
        transition: { duration: 30000 }
       }
    });

    const StyledView = styled(View)`
      width: 200px;`;

    return (

        <StyledView
          pose={this.state.hovering ? "hovered" : "idle"}
          onMouseEnter={() => this.setState({ hovering: true })}
          onMouseLeave={() => this.setState({ hovering: false })}
        >
          <MyComponent />
      </StyledView>
    );
  }
}

render() {
 ...
      <ImgComponent img={MyImage}/>
...
}