React Spring - 渲染之间的动画元素

Question

我正在努力克服 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);

我建立了一个 Code Sandbox 项目来让事情变得更简单。任何帮助将非常感激。 https://codesandbox.io/s/wizardly-hill-6hkk9

Answer 1

可能有更好的方法来做到这一点，但这里有一个简单的方法：

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 来控制其外观的想法。

希望对您有所帮助。

React Spring - 渲染之间的动画元素

React Spring - Animate element between renders

javascript

css

animation

react-spring