Question 200058 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Animation with ternary operator in ReactJS

I have simple code:

const CallButton = () => {
    const [isActive, setIsActive] = useState(false);

    return (
        <div className={styles.container}>
            {
                isActive ?
                    <>
                        <div className={styles.callButton}/>
                        <div className={styles.callButton}/>
                        <div className={styles.callButton}/>
                    </> :
                    <div className={styles.main}
                         onClick={() => setIsActive(true)}>
                        <div className={styles.notActiveButton}>Связаться со мной</div>
                    </div>
            }
        </div>
    );
};

export default CallButton;

Now I want to make animation for it. I want first div shifts to the right, and new div
appears on the left simultaneously. But I can’t because on ‘isActive’ state change first div disappears from DOM at once. How I can the easiest way to do it?

Tags:

2

Answers


  1. 0

    In this code, I’ve added the CSS class shiftRight to the first div when isActive is true. This class will be responsible for animating the shift to the right. The shiftRight class can be defined in your CSS file (CallButton.module.css) like this:

    import styles from './CallButton.module.css';

const CallButton = () => {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className={styles.container}>
      {
        isActive ?
          <>
            <div className={`${styles.callButton} ${styles.shiftRight}`}/>
            <div className={styles.callButton}/>
            <div className={styles.callButton}/>
          </> :
          <div className={styles.main} onClick={() => setIsActive(true)}>
            <div className={styles.notActiveButton}>Связаться со мной</div>
          </div>
      }
    </div>
  );
};
    .shiftRight {
  animation: shiftRightAnimation 0.5s ease-in-out;
}

@keyframes shiftRightAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

    With these changes, the first div will transition smoothly to the right while a new div appears on the left simultaneously when isActive is true.

    Login or Signup to reply.
  2. 0

    You need to always show the second div. So try below code (use ternary or &&). For animation you can add some CSS transitions

            <div className={styles.container}>
            {
                isActive ?
                    <>
                        <div className={styles.callButton}/>
                        <div className={styles.callButton}/>
                        <div className={styles.callButton}/>
                    </> : null }
                    <div className={styles.main}
                         onClick={() => setIsActive(true)}>
                        <div className={styles.notActiveButton}>Связаться со мной</div>
                    </div>
            
        </div>
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search