useTransition 与 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

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

更新： 我创建了一个示例，当进入元素的动画等待离开元素的动画完成时。 我用插值法做到了。 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