Try the fiddle: http://jsfiddle.net/zhjk39qe/2/ - Click the button to make the box fade in/out.
When I click the button twice in quick succession, I expect the box to start fading out for a split second but immediately fade back in. Instead, in this fiddle, the box has to fade all the way out and then will fade all the way in. (The second click is queued up and doesn't feel snappy. Bad user experience.)
Is there any way to force the the second transition immediately?
(Been digging around in here but not sure where to go: https://github.com/facebook/react/tree/master/src/addons/transitions)
JS is here:
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Hello = React.createClass({
getInitialState: function() {
return {on: true};
},
onClick: function() {
this.setState({on: !this.state.on});
},
render: function() {
var k = this.state.on ? (<div> Hello {this.props.name} </div>) : "";
return <div>
<a href="#" onClick={this.onClick}> Click to toggle </a> <br/> <br/>
<ReactCSSTransitionGroup transitionName="example">
{k}
</ReactCSSTransitionGroup>
</div>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
You can use CSS classes to animate in React Let's start by creating our React component first. import React, { useState } from 'react'; import classNames from 'classnames'; import styles from './App. module. css'; const App = () => { const [animate, setAnimate] = useState(false); const handleClick = () => setAnimate(!
React Transition Group is a good animation library and has a very small bundle size. It's one of the most popular animation libraries and should be considered for your next React project.
I agree with @Morhaus I would just toggle the css class as needed.
here is a working example. I know this deviates from your original question but ReactCSSTransitionGroup is not really needed in this case.
http://jsfiddle.net/joverall22/t7wok2zy/
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Hello = React.createClass({
getInitialState: function() {
return {on: true};
},
onClick: function() {
this.setState({on: !this.state.on});
},
render: function() {
var variant;
if(this.state.on){
variant = 'transition on';
} else {
variant = 'transition off';
}
var k = <div className={variant}> Hello {this.props.name} </div>
return <div>
<a href="#" onClick={this.onClick}> Click to toggle </a>
<br/> <br/>
<span>{k}</span>
</div>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With