React Transition Group V2 skipping the entering/exiting status
I’m trying to get my head around React Transition Group V2
I built a demo using create-react-app and the example in the documentation but it skips the entering/exiting status’ and doesn’t trigger a Transition.
So far I have….
Tried Inline (like in the documentation) and also using the class name, but same result.
added and removed browser specific css
Fiddled around with all the props, with little luck (although the appear prop did trigger ‘entering’ and run the transition)
Here’s a link to the documentation: https://reactcommunity.org/react-transition-group/
And here’s what I have. (I know V2 is pretty new so any help will be greatly appreciated.)
import React, { Component } from 'react';
import Transition from 'react-transition-group/Transition'
class App extends Component {
state = { show: false }
handleClick = e => {
this.setState({show: !this.state.show})
}
render() {
const duration = 300;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}
const transitionStyles = {
entering: { opacity: 1 },
entered: { opacity: 1 },
};
const Fade = ({ in: inProp }) => (
<Transition in={inProp} timeout={duration}>
{(state) => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
I'm A fade Transition!
</div>
)}
</Transition>
);
return (
<div className="App">
<Fade in={this.state.show}/>
<button onClick={this.handleClick}>TOGGLE</button>
</div>
);
}
}
export default App;
Okay, my apologies, I made a simple mistake.
The Presentational Fade Component threw me and I incorrectly nested it within the App component.
I moved it and its associated consts outside the App component and voila!
import React, { Component } from 'react';
import Transition from 'react-transition-group/Transition'
const duration = 300;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}
const transitionStyles = {
entering: { opacity: 1 },
entered: { opacity: 1 },
};
const Fade = ({ in: inProp }) => (
<Transition in={inProp} timeout={duration}>
{(state) => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
I'm A fade Transition!
</div>
)}
</Transition>
);
class App extends Component {
state = { show: false }
handleClick = e => {
this.setState({show: !this.state.show})
}
render() {
return (
<div className="App">
<Fade in={this.state.show}/>
<button onClick={this.handleClick}>TOGGLE</button>
</div>
);
}
}
export default App;