Slide animation between react divs -

Question

I am using react-transition-group to help with managing transitions between elements. I am trying to implement a quiz where the questions slide over the other question after a user answers one question. However my transition makes it so that the the divs are stacked vertically. I would like it to slide over kinda like a card. I have this codesandbox of what i've done.

relevant code:

transition group

 renderQuestion = () => {
    const question = this.questionsToAnswer[this.state.currentQuestionIndex];

    return (
      <div
        style={{
          display: "flex",
          flexDirection: "row"
        }}
      >
        <TransitionGroup className="slide-group">
          <CSSTransition
            classNames="slide"
            timeout={{ enter: 500, exit: 500 }}
            key={`${this.state.currentQuestionIndex}`}
          >
            <div>
              <div
                style={{
                  fontFamily: "Oswald",
                  fontStyle: "normal",
                  fontWeight: 500,
                  fontSize: "28px",
                  letterSpacing: "0.05em",
                  color: "#003E4C",
                  marginBottom: "10px",
                  width: "700px"
                }}
              >
                {question["description"]}
              </div>
              <div>{this.renderRadioQuestion(question["answers"])}</div>
            </div>
          </CSSTransition>
        </TransitionGroup>
      </div>
    );
  };

styles.css

/* ANIMATIONS */
.slide-enter {
  transform: translateX(100%);
}
.slide-enter-active {
  transform: translateX(0%);
  transition: transform 500ms ease-in-out;
}
.slide-exit {
  transform: translateX(0%);
}
.slide-exit-active {
  transform: translateX(-100%);
  transition: transform 500ms ease-in-out;
}

/*  not sure how to style this so that i can transition divs nicely*/
.slide-group {
  /* display: flex;
  flex-wrap: nowrap; */
}

score 2 · Answer 1 · answered Jul 23 '20 at 01:05

2

Translate the y-axis as well to prevent stacking vertically.

.slide-exit {
  transform: translate(0%, -100%);
}
.slide-exit-active {
  transform: translate(-100%, -100%);
  transition: transform 500ms ease-in-out;
}

CodeSandBox: https://codesandbox.io/s/jolly-worker-xht4i?file=/src/styles.css

answered Jul 23 '20 at 01:05

95faf8e76605e973

13,643
3
24
51

Thank you. I ended up using translate and solved it with `.slide-exit { transform: translate(-100%, 0%); } .slide-exit-active { transform: translate(-200%, 0%); transition: transform 500ms ease-in-out; } .slide-group { display: flex;/* flex-wrap: nowrap; */ }` – Nick Jul 23 '20 at 02:06

score 0 · Accepted Answer · answered Jul 23 '20 at 02:07

Thanks to 95faf8e76605e973 I ended up using the following styles

.slide-exit {
  transform: translate(-100%, 0%);
}
.slide-exit-active {
  transform: translate(-200%, 0%);
  transition: transform 500ms ease-in-out;
}


.slide-group {
  display: flex;/* 
  flex-wrap: nowrap; */
}

Slide animation between react divs -

2 Answers2