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创建的功能。我认为这可以简单得多。我将更改状态管理并在状态下处理数组。渲染应该简单得多。

更新：我创建了一个示例，当entrying元素的动画等待剩余元素的动画完成时。我用插值法做到了。 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与react-spring作为组件更改

1 个答案: