I'm fairly new with React and had some questions using this module.
The idea is to have an element that animates opacity and becomes hidden after animation based on a button toggle (opacity 0 doesn't works in this case since mouse events still works in an element with opacity 0, so display: none or visibility:hidden should work)
Problem: I need to animate opacity based on custom prop, it's ok and animates perfectly using opacity={this.props.opened ? 1 : 0}. But at the end of animation, i need to apply {visibility: 'hidden'} or {display: 'none'} to child component, and on animation start, i also need to apply back {visibility: 'visible'} for element to reaper.
I tried keeping this style in state but when i call setState in 'begin' method it enters in an infinite loop. also, i tried to set style directly using this.refs but it returns Uncaught TypeError: Can't add property style, object is not extensible
I'm fairly new with React and had some questions using this module.
The idea is to have an element that animates opacity and becomes hidden after animation based on a button toggle (opacity 0 doesn't works in this case since mouse events still works in an element with opacity 0, so display: none or visibility:hidden should work)
Problem: I need to animate opacity based on custom prop, it's ok and animates perfectly using opacity={this.props.opened ? 1 : 0}. But at the end of animation, i need to apply {visibility: 'hidden'} or {display: 'none'} to child component, and on animation start, i also need to apply back {visibility: 'visible'} for element to reaper.
I tried keeping this style in state but when i call setState in 'begin' method it enters in an infinite loop. also, i tried to set style directly using this.refs but it returns
Uncaught TypeError: Can't add property style, object is not extensibleWhat are the best ways to approach this problem?