On master: onExited not firing for Transitions #76
Description
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
onExited is not firing for Transitions.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/1Lb2qk3v/).
Not sure how to link to the edge version of the library from jsfiddle, so see demo below.
What is the expected behavior?
onExited fires after the transition timeout ("exited" printed in demo).
Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
Tested in Chrome 58.0.3029.110 on macOS Sierra.
Demo
webpack.config.js
module.exports = {
entry: __dirname + '/app.jsx',
output: {
path: __dirname + '/dist',
filename: 'app.js',
},
module: {
rules: [
{ test: /.jsx?$/, include: __dirname, loader: 'babel-loader' }
]
},
}
app.jsx
import React from 'react';
import {render} from 'react-dom';
import {Transition, TransitionGroup} from './react-transition-group'
class App extends React.Component {
constructor() {
super();
this.state = {showChild: false};
}
toggleChild = (event) => {
this.setState({showChild: !this.state.showChild});
}
render() {
const child = <Transition
timeout={1000}
onEntering={() => console.log('entering')}
onEntered={() => console.log('entered')}
onExiting={() => console.log('exiting')}
onExited={() => console.log('exited')}
>
<div style={{height: '50px', width: '50px', backgroundColor: 'blue'}} />
</Transition>
return <div id="app">
<button onClick={this.toggleChild}>Toggle</button>
<TransitionGroup>{this.state.showChild ? child : null}</TransitionGroup>
</div>;
}
}
render(<App/>, document.getElementById('app'));
index.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app"></div>
<script type="text/javascript" src="app.js" charset="utf-8"></script>
</body>
</html>