React Spring - анимационный элемент между рендерами - PullRequest
Новая
       48

React Spring - анимационный элемент между рендерами

1 голос
/ 06 апреля 2020

Я пытаюсь понять React Spring. Итак, у меня есть несколько блоков, которые мне нужно отфильтровать по активному индексу, и идея состоит в том, чтобы анимировать рендеринг блоков, но у меня есть анимация, только когда компонент рендерит в первый раз.

Это что у меня есть до сих пор: 

import React from "react";
import ReactDOM from "react-dom";
import styled from "@emotion/styled";
import { useTransition, animated } from "react-spring";

import "./styles.css";

const Header = styled.div`
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
`;

const Content = styled.div`
  display: flex;
  justify-content: center;
`;

const Box = styled.div`
  width: 64px;
  height: 64px;
  background-color: yellow;
  border: 3px solid yellowgreen;
  color: yellowgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
`;

const EnhancedBox = animated(Box);

const App = () => {
  const [activeBoxIndex, setActiveBoxIndex] = React.useState(0);
  const boxes = [
    { label: "1", key: 0 },
    { label: "2", key: 1 },
    { label: "3", key: 2 }
  ];

  const transition = useTransition(boxes, item => item.key, {
    from: { maxHeight: "0px", overflow: "hidden", margin: "0px 0px" },
    enter: { maxHeight: "100px", overflow: "hidden", margin: "5px 0px" },
    leave: { maxHeight: "0px", overflow: "hidden", margin: "0px 0px" }
  });

  const handleBoxClick = n => () => {
    setActiveBoxIndex(n);
  };

  return (
    <div className="App">
      <Header>
        <button onClick={handleBoxClick(0)}>Show box 1</button>
        <button onClick={handleBoxClick(1)}>Show box 2</button>
        <button onClick={handleBoxClick(2)}>Show box 3</button>
      </Header>
      <Content>
        {transition.map(({ item, props, key }) => {          
          return item.key === activeBoxIndex ? (
            <EnhancedBox key={item.key} style={props}>
              {item.label}
            </EnhancedBox>
          ) : (
            <></>
          );
        })}
      </Content>
    </div>
  );
};

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

Я создал проект Sand Sandbox, чтобы упростить процесс. Любая помощь приветствуется. https://codesandbox.io/s/wizardly-hill-6hkk9

1 Ответ

1 голос
/ 06 апреля 2020

Возможно, есть лучшие способы сделать это, но вот простой подход, который работает: 

const boxes = [
  { label: "1", key: 0 },
  { label: "2", key: 1 },
  { label: "3", key: 2 }
];
//start with item 0 in the display boxes array
const displayBoxes = [];
displayBoxes.push(boxes[0]);

const transition = useTransition(displayBoxes, item => item.key, {
  from: { maxHeight: "0px", overflow: "hidden", margin: "0px 0px" },
  enter: { maxHeight: "100px", overflow: "hidden", margin: "5px 0px" },
  leave: { maxHeight: "0px", overflow: "hidden", margin: "0px 0px" }
});

const handleBoxClick = n => () => {
  //empty the array
  displayBoxes = [];
  //then push in the new item
  displayBoxes.push(boxes[n]);
};

Одна особенность useTransition, которая не сразу очевидна для новичка, состоит в том, что ловушка useTransition действует как наблюдатель текущее состояние массива, который вы передаете ему.

Чтобы добиться нужного эффекта, я анимировал высоту от 0 до авто, но для этого требуется способ получить высоту в пикселях и добавить еще один слой осложнений. Мне нравится идея установить высоту элемента, а затем использовать maxHeight для управления его внешним видом.

Надеюсь, это поможет.

...