CODEWITHSUNDEEP
javascriptcssreactjs
WonkasWilly
WonkasWilly

Reputation: 573

How can I best implement this React Transition?

I am attempting to create an easy-to-use UI/UX selection system.

Essentially, on the viewport, I first have 3 "difficulty" components that choose what "difficulty level" you want.

Once clicked, they should then transition to the next selection phase, which would be "male" or "female".

Clicking this button should move/remove the difficulty level component to the left (out of the viewport), and move the sex selection into the viewport.

How would I implement this?

I also plan on implementing a "Go back" feature as well in the future, so that users can go back and forth from Difficulty and Sex components.

My ideas

  1. Once the button is clicked, I just use CSS to transition the difficulty component out of the viewport, and the "sex" component into the viewport. After the transition, I give that component a display: none to remove it completely from the user.

Concerns: This doesn't seem efficient. Should I be removing the component entirely? If so, where does one begin to do that?

  1. Another method would be to remove/add the components as needed...which I believe would require using the ComponentDidMount() and ComponentDidUnmount() functions, and then using the React Transition Group library to somehow transition them out?

Here is an excellent, Picasso-like, hand-drawn example from myself:

Example

Upvotes: 1

Views: 62

Answers (1)

FisNaN
FisNaN

Reputation: 2865

There is how to do the transition.
Typically, setting display: none stops any sort of animation, which you don't want to do.

export default class Modal extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return (
      nextProps.show !== this.props.show ||
      nextProps.children !== this.props.children
    );
  }

  render() {
    const { show, children } = this.props;
    return (
      <div
        style={{
          transform: show ? 'translateY(0)' : 'translateY(-100vh)',
          opacity: show ? 1 : 0,
        }}
      >
        {children}
      </div>
    );
  }
}

Note that returning false from shouldComponentUpdate will stop re-rendering the modal and its children.
The children could be anything or nothing. So when you don't want to show it, render an empty div outside view window is very efficient.

Key takeaway

  • display: none shouldn't need most of the time. It doesn't support animation, and render function can return <div /> or null.

  • React components will re-render when received new props or updated state, regardless display type and window position.

  • Mare sure have a clear understanding on rendering lifecycle, not all mounting/updating functions can setState, and you can stop re-rendering manually.

Upvotes: 1

Related Questions