Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In React, how can I trigger animations immediately instead of having them queue up?

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'));
like image 501
tb11 Avatar asked Mar 31 '15 04:03

tb11


People also ask

How do you add an animation to button click in React?

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(!

Is React good for animations?

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.


1 Answers

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'));
like image 117
joverall22 Avatar answered Sep 19 '22 05:09

joverall22