Question

我试图使当您单击div时不透明度降低。但是，尽管与我的姿势元素相关的动态值降低了，但盒子的不透明度仍然保持不变。

在我看来，我已经遵循the rules of the doc

这是我的反应片段：

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'));

如何使不透明度遵循道具的价值？任何提示都会很棒，谢谢

react-pose：我的动态道具不会触发我的动画元素的变化

0 个答案: