如何转换已有动画的React元素

Question

我需要一些帮助合并动画和过渡，发生在不同的时间使用react-spring。

当使用useSpring挂载组件时，我会让组件出现，但我希望这样，当按钮子组件被移除时，容器可以平滑地向上过渡。在示例中有更多的细节。

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

请帮助:)

Answer 1

我创造了一个解决方案。有一个新的Spring动画主要用于按钮，但我们可以将它的一部分用于原始div。在本例中为maxHeight属性。这样你就可以组合动画了。

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);

下面是一个例子：https://codesandbox.io/s/green-star-nzfj8这是你的问题的答案吗？