Как изменить реакцию на элементы, у которых уже есть анимация

Мне нужна помощь в объединении анимации и перехода, которые происходят в разное время, с помощью react-spring.

Когда компонент монтируется с помощью useSpring, я создаю компонент, но я бы хотел, чтобы при удалении дочерней кнопки контейнер плавно перемещался вверх. Подробности в примере.

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

ПОЖАЛУЙСТА ПОМОГИ :)


reactjs css react-spring
person Arjun Gupta    schedule 14.12.2019    source источник
comment
Добавьте свой код в вопрос.   -  person StudioTime    schedule 14.12.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я создал решение. Есть новая анимация 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 Это ответ на ваш вопрос?

person Peter Ambruzs    schedule 15.12.2019
comment
Ах, здорово, это потрясающе, спасибо !! Однако есть вопрос: есть ли способ вычислить максимальную высоту, а не жестко ее запрограммировать? Я спрашиваю, потому что что, если размер текста и кнопки реагируют и, следовательно, размеры меняются? - person Arjun Gupta; 16.12.2019
comment
Боюсь, вы не можете рассчитать это. Но есть другой способ, я обновил пример. - person Peter Ambruzs; 16.12.2019
comment
Вы проверяете коды и ящик? В нем сейчас нет фиксированного размера. Он должен работать как отзывчивый компонент. - person Peter Ambruzs; 17.12.2019