How To Transition React Elements That Already Have An Animation

Question

I need some help merging an animation and a transition that occur at different times using react-spring.

When the component is mounted using useSpring I make the component appear, but I would like it so that when the button child is removed the container transitions smoothly upwards. Theres more details in the example.

https://codesandbox.io/s/naughty-dawn-r0e5x

PLEASE HELP :)

Please add your code into the question. – StudioTime Dec 14 '19 at 17:49 — StudioTime, Dec 14 '19 at 17:49

score 0 · Accepted Answer · answered Dec 15 '19 at 18:36

I created a solution. There is a new Spring animation mainly for the button, but we can use part of it for the original div. In this case the maxHeight property. So this way you can combine the animations.

import ReactDOM from "react-dom";
import React, { useState } from "react";
import { useSpring, animated } from "react-spring";

function WelcomeMessage() {
  const [isStarted, setIsStarted] = useState(false);

  const animation1 = useSpring({
    right: "1%",
    opacity: 1,
    from: { right: "-20%", opacity: 0 },
    delay: 300
  });

  const animation2 = useSpring({
    opacity: isStarted ? 0 : 1,
    maxHeight: isStarted ? 150 : 250,
    transform: `translateY(${isStarted ? "-50px" : "0px"})`
  });

  return (
    <animated.div
      style={{
        backgroundColor: "pink",
        position: "fixed",
        top: "2%",
        right: "1%",
        cursor: "default",
        borderRadius: 5,
        width: "90%",
        maxWidth: 400,
        ...animation1,
        maxHeight: animation2.maxHeight
      }}
    >
      <div style={{ padding: "15px 25px" }}>
        <span>
          This is a toaster notification component. When you click the following
          button it should disappear and the pink container's bottom section
          should transition upwards when it decreases in height.
        </span>
        <br />
        <br />
        {
          <animated.button
            style={{ width: "100%", fontSize: 48, ...animation2 }}
            onClick={() => {
              setIsStarted(true);
            }}
          >
            Get Started
          </animated.button>
        }
      </div>
    </animated.div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<WelcomeMessage />, rootElement);

Here is the example: https://codesandbox.io/s/green-star-nzfj8 Is this answer your question?

Ah great this is awesome thanks!! One question though, is there a way of calculating the max height rather than hardcoded it? I ask because what if the size of the text and the button are responsive and therefore the sizes change — Arjun Gupta, Dec 16 '19 at 17:00
I'm afraid you can't calculate it. But there is another way, I updated the example. — Peter Ambruzs, Dec 16 '19 at 17:36
Do you check the codesandbox? There is no fixed size in it now. It should work as a responsive component. — Peter Ambruzs, Dec 17 '19 at 09:31

How To Transition React Elements That Already Have An Animation

1 Answers1