如何过渡已经有动画的 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 这是否回答了您的问题？

如何过渡已经有动画的 React 元素

How To Transition React Elements That Already Have An Animation

css

reactjs

react-spring