useTransition with react-spring 作为组件变化

Question

我正在尝试制作一张卡片进出的动画。如果有选定的值，则会出现卡片。如果所选项目未定义，则卡片会消失。我得到这个工作。

接下来我尝试做的是，如果选择发生变化（一个新项目）- 制作一张卡片的动画并制作一张新卡片的动画。我对如何使这项工作感到困惑...这是我尝试过的那种工作。

很明显，我不明白应该怎么做。我想知道我是否需要将它分成两张卡片和运行 useChain.

const App: React.FC = () => {

  //...

  const [selectedItem, setSelectedItem] = useState<TimelineItem | undefined>(undefined);
  const [lastSelectedItem, setLastSelectedItem] = useState<TimelineItem>({
    content: '',
    start: new Date(),
    id: 0,
  });

 //...

  const transitions = useTransition(
    [selectedItem, lastSelectedItem],
    item => (item ? item.id : 0),
    {
      from: { opacity: 0 },
      enter: { opacity: 1 },
      leave: { opacity: 0 },
    }
  );

  return (
      <Timeline
        onItemSelect={item => {
          if (selectedItem) setLastSelectedItem(selectedItem);
          setSelectedItem(item);
        }}
      />
      {transitions.map(({ item, key, props }) => {
        return (
          item && (
            <animated.div style={props}>
              {item === selectedItem ? (
                <ItemDetails
                  item={selectedItem} // If the selected item is undefined, this will not be running (happens when unselecting something)
                  groups={groups}
                  key={key || undefined} // key becomes undefined since item is
                ></ItemDetails>
              ) : (
                false && ( // The last item never shows, it still has the data for the lastSelectedItem (For the fade out while the new Item is being shown or there is no new item).
                  <ItemDetails
                    item={lastSelectedItem}
                    groups={groups}
                    key={key || undefined}
                  ></ItemDetails>
                )
              )}
            </animated.div>
          )
        );
      })}
  );
};

Answer 1

如果我理解你的话，你想要显示数组的状态。新元素淡入，旧元素淡出。这是 Transition 创建的功能。我认为它可以做得更简单。我会更改状态管理并处理状态中的数组。而且渲染应该简单得多。

更新： 当进入元素的动画等待离开元素的动画完成时，我创建了一个示例。我用插值法做到了。 o 值从 0 变为 1 表示进入，从 1 变为 2 表示离开。所以不透明度会改变：

离开：1 -> 0 -> 0

输入：0 -> 0 -> 1

代码如下：

import React, { useState, useEffect } from "react";
import { useTransition, animated } from "react-spring";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [cards, set] = useState(["A"]);

  useEffect(() => {
    setInterval(() => {
      set(cards => (cards[0] === "A" ? "B" : "A"));
    }, 4000);
  }, []);

  const transitions = useTransition(cards, null, {
    from: { o: 0 },
    enter: { o: 1 },
    leave: { o: 2 },
    config: { duration: 2000 }
  });
  return transitions.map(({ item, key, props }) => (
    <div style={{ fontSize: "300px" }}>
      <animated.div
        style={{
          position: "absolute",
          opacity: props.o.interpolate([0, 0.5, 1, 1.5, 2], [0, 0, 1, 0, 0])
        }}
      >
        {item}
      </animated.div>
    </div>
  ));
}

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

工作示例：https://codesandbox.io/s/react-spring-staggered-transition-xs9wy

useTransition with react-spring 作为组件变化

useTransition with react-spring as a component changes

reactjs

react-spring