反应姿势:我的动态道具不会触发动画元素的变化

但是,尽管与我的姿势元素相关联的动态值降低了,长方体的不透明度仍然保持不变。

在我看来,我已经跟上了 the rules of the doc

here my sandbox

这里是我的反应片段:

import React from 'react';
import ReactDOM from 'react-dom';
import posed from "react-pose";
import './styles.css';

const Box = posed.div({
  visible: {
   // opacity: ({ opacityValue }) => ({ opacity: opacityValue }), doesn't work
    // opacity:  ({opacityValue}) ,
    opacity: ({ opacityValue }) => opacityValue,
    transition: { duration: 1000 }
  }
})
class Example extends React.Component {
  state = {
    isVisible: true,
    opacityValue: 1
  };

  handleHover = () => { 
    console.log("opacity value: ", this.state.opacityValue)
    console.log("decrease opacity value")
    this.setState((previousState, currentProps) => {
      return {
        opacityValue: previousState.opacityValue - 0.1
      };
    });
  }

  render() {
    const { isVisible } = this.state;
    return (
      <div>
        trigger animation from a div to an another one
      <Box
          onPoseComplete={console.log("pose complete :)")}
          className="box"
          opacityValue={this.state.opacityValue}
         pose= "visible" 
        />

        <div
          onClick={() => this.handleHover()}
          // onMouseLeave={this.handleHover}
          className="box_to_hover"
        >
          click on me to decrease box opacity
      </div>
      </div>)
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

如何使不透明度跟随道具的值? 谢谢