Tips for optimizing your animation using ReactCSSTransitionGroup

Question

Tips for optimizing your animation using ReactCSSTransitionGroup

I'm currently working on integrating the "bounce" animation feature from animate.css into a React component.

Here's the CSS I've set up so far:

// Animation Bounce

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}


// Classes for ReactCSSTransitionGroup

.example-enter {
  opacity: 0.01;
  color: green;
}

.example-enter.example-enter-active {
  opacity: 1;
  color: red;
  animation: bounce 5000ms ease-in;
}

.example-leave {
  opacity: 1;
  color: purple;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  color: cyan;
  animation: bounce 3000ms ease-in;
}

Now, in terms of my React code implementation:

<ReactCSSTransitionGroup
                transitionName="example"
                transitionEnterTimeout={5000}
                transitionLeaveTimeout={3000}>
                  <span key={key}>
                      { item }
                  </span>
    </ReactCSSTransitionGroup>

Despite some progress where the text changes to red, I haven't been successful in getting the "bounce" animation to function as intended.

Any help or guidance would be greatly appreciated.

css reactjs reactcsstransitiongroup

Answer 1

Answer №1

const TransitionGroup = React.addons.TransitionGroup;

class ContainerComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = { display: false };
  }

  render(){
    return (
      <div className='container'>
        <TransitionGroup 
        transitionName="example"
        transitionEnterTimeout={500} transitionLeaveTimeout={500}
      >
        {this.state.display && <div className='box' key={'box'}></div>}
        </TransitionGroup>
        <button onClick={this.handleButtonClick.bind(this)}>Click Me!</button>
      </div>
    )
  }

  handleButtonClick(e){
  console.log(this.state.display);
    this.setState({
      display: !this.state.display
    });
  }
}

React.render(<ContainerComponent />, document.getElementById('container'));

.container {
    text-align: center;
}

button {
    position: absolute;
    top: 50px;
    right: 43%;
}

.box {
    width: 50px;
    height: 50px;
    border: 1px solid;
    background-color: green;
}

// Animation Bounce
@-webkit-keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

/** Classes for Transitions **/
.example-enter {
    opacity: 0;
    background-color: red;
}

.example-enter-active {
    background-color: green;
    opacity: 1;
    animation: bounce 500ms ease-in;
    transition: all .5s ease-in;
}

.example-leave {
    opacity: 1;
    background-color: purple;
}

.example-leave.example-leave-active {
    opacity: 0.1;
    background-color: cyan;
    transition: all .5s ease-out;
    animation: bounce 500ms ease-in;
}

Transitions with ReactJs allows smooth entry and exit animations...

Check out the code here: https://jsfiddle.net/7czwpmdL/

Answer 2

const TransitionGroup = React.addons.TransitionGroup;

class ContainerComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = { display: false };
  }

  render(){
    return (
      <div className='container'>
        <TransitionGroup 
        transitionName="example"
        transitionEnterTimeout={500} transitionLeaveTimeout={500}
      >
        {this.state.display && <div className='box' key={'box'}></div>}
        </TransitionGroup>
        <button onClick={this.handleButtonClick.bind(this)}>Click Me!</button>
      </div>
    )
  }

  handleButtonClick(e){
  console.log(this.state.display);
    this.setState({
      display: !this.state.display
    });
  }
}

React.render(<ContainerComponent />, document.getElementById('container'));

.container {
    text-align: center;
}

button {
    position: absolute;
    top: 50px;
    right: 43%;
}

.box {
    width: 50px;
    height: 50px;
    border: 1px solid;
    background-color: green;
}

// Animation Bounce
@-webkit-keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

/** Classes for Transitions **/
.example-enter {
    opacity: 0;
    background-color: red;
}

.example-enter-active {
    background-color: green;
    opacity: 1;
    animation: bounce 500ms ease-in;
    transition: all .5s ease-in;
}

.example-leave {
    opacity: 1;
    background-color: purple;
}

.example-leave.example-leave-active {
    opacity: 0.1;
    background-color: cyan;
    transition: all .5s ease-out;
    animation: bounce 500ms ease-in;
}

Transitions with ReactJs allows smooth entry and exit animations...

Check out the code here: https://jsfiddle.net/7czwpmdL/

Tips for optimizing your animation using ReactCSSTransitionGroup

Answer №1

Similar questions

Personalize the appearance of a component using React Bootstrap styling

What is the best way to position two elements floated to the right in separate rows within a single row?

Finding all instances of a specific class in Sublime Text 2

Chrome method for creating Flexbox columns of equal height

Why isn't the Full Calendar loading automatically within a Bootstrap Tab?

Trimming the div tag from the bottom of the webpage

Having trouble utilizing the data obtained from an API, encountering errors such as 'data is undefined' leading to nothing displaying on the screen, or 'data.map() is undefined'

Top method for triggering an action on the client-side during Sign In with the help of Redux, React, and NextAuth

Upon making the initial post request, axios yielded a 404 error code

Having an issue with both of my states being called simultaneously, resulting in a TypeError: Cannot read property 'map' of undefined

Align the content in the center vertically unless it is bigger

Issue with utilizing the useState hook data when using the .map method

The passing of React parent component props to the child component is not functioning as expected

Manage the appearance of a component using props

React components can be used to dynamically render and display an array of objects through methods like reduce and

Triggering the function once the text field is tapped again

necessity for a condition in Material UI input field

Is it possible to link a solidity contract with a Node.js backend?

Unable to define the color of icons path using CSS in Vue 3

Personalizing the design of Bootstrap