Question

我正在尝试使用React-Spring库中的'useTransition'和'animated'，并且遇到一个问题，即它仅在第一时间设置动画，并且不激活请假。

通过深入研究，我认为这与密钥没有更新这一事实有关，并且我认为这是使新动画能够渲染的原因，但是我不知道如何获取密钥来更新其他动画而不是刷新页面。

function App() {
  const [showApplicants, setShowApplicants] = useState(false);
  const [showSpecificApplicant, setShowSpecificApplicant] = useState([]);
  const [applicants, setApplicants] = useState([
    {
      firstName: "Billy",
      background: "Employed",
      id: 1
    },
    {
      firstName: "Sarah",
      background: "Employed",
      id: 2
    },
    {
      firstName: "Vera",
      background: "Student",
      id: 3
    },
    {
      firstName: "Albert",
      background: "Unemployed",
      id: 4
    }
  ]);

  const transitions = useTransition(applicants, item => item.id, {
    from: {
      transform: "translate(-100%, 0)"
    },
    enter: {
      transform: "translate(0%,0)"
    },
    leave: {
      transform: "translate(150%, 0)"
    },
    config: { duration: 3000 }
  });

  const handleApplicants = () => {
    setShowApplicants(!showApplicants);
    setShowSpecificApplicant([]);
  };

  const showDetails = (e, item) => {
    setShowSpecificApplicant(item.id);
  };

  const SpecificApplicant = () => {
    const matchedUser = applicants.find(
      user => user.id === showSpecificApplicant
    );
    return transitions.map(({ item, key, props }) => {
      return showSpecificApplicant === item.id ? (
        <animated.div key={key} style={props}>
          <div
            style={{
              background: "lightblue",
              width: "20%",
              margin: "0 auto",
              textAlign: "center",
              borderRadius: "5px",
              padding: "10px",
              display: "flex",
              flexDirection: "column"
            }}
          >
            <h3 style={{ margin: "0", padding: "0" }}>
              {matchedUser.firstName}
            </h3>
            <p> Current Status: {matchedUser.background}</p>
          </div>
        </animated.div>
      ) : null;
    });
  };

  return (
    <div className="App">
      <h1>Hello</h1>
      <button onClick={handleApplicants}> Show Applicants </button>
      <ul>
        {showApplicants &&
          applicants.map(item => (
            <button onClick={e => showDetails(e, item)}>
              {item.firstName}
            </button>
          ))}
      </ul>
      <SpecificApplicant />
    </div>
  );
}

我希望每次单击申请人时都会触发一个动画，但它只是第一次进行动画处理。之后，它们只会正常显示。谁能告诉我我在做什么错。

Answer 1

过渡必须处理数组的更改。因此，将useTransition中的申请人数组更改为showSpecificApplicant数组。这样，它将为新的数组元素应用enter动画，并为您从数组中删除的元素应用left动画。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { useTransition, animated } from 'react-spring';
import './styles.css';

function App() {
  const [showApplicants, setShowApplicants] = useState(false);
  const [showSpecificApplicant, setShowSpecificApplicant] = useState([]);
  const [applicants, setApplicants] = useState([
    {
      firstName: 'Billy',
      background: 'Employed',
      id: 1
    },
    {
      firstName: 'Sarah',
      background: 'Employed',
      id: 2
    },
    {
      firstName: 'Vera',
      background: 'Student',
      id: 3
    },
    {
      firstName: 'Albert',
      background: 'Unemployed',
      id: 4
    }
  ]);

  const transitions = useTransition(showSpecificApplicant, item => item.id, {
    from: {
      transform: 'translate(-100%, 0)'
    },
    enter: {
      transform: 'translate(0%,0)'
    },
    leave: {
      transform: 'translate(150%, 0)'
    }
  });

  const handleApplicants = () => {
    setShowApplicants(!showApplicants);
    setShowSpecificApplicant([]);
  };

  const showDetails = (e, item) => {
    setShowSpecificApplicant([item]);
  };

  const SpecificApplicant = () => {
    return transitions.map(({ item: matchedUser, key, props }) => {
      return (
        <animated.div key={key} style={props}>
          <div
            style={{
              background: 'lightblue',
              width: '20%',
              margin: '0 auto',
              textAlign: 'center',
              borderRadius: '5px',
              padding: '10px',
              display: 'flex',
              flexDirection: 'column'
            }}
          >
            <h3 style={{ margin: '0', padding: '0' }}>
              {matchedUser.firstName}
            </h3>
            <p> Current Status: {matchedUser.background}</p>
          </div>
        </animated.div>
      );
    });
  };

  return (
    <div className="App">
      <h1>Hello</h1>
      <button onClick={handleApplicants}> Show Applicants </button>
      <ul>
        {showApplicants &&
          applicants.map(item => (
            <button onClick={e => showDetails(e, item)}>
              {item.firstName}
            </button>
          ))}
      </ul>
      <SpecificApplicant />
    </div>
  );
}

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

您可以在这里查看结果：https://codesandbox.io/s/jolly-glade-mbzl7

现在，您可能希望在过渡期间将申请人的样式更改为同一行。如果将position: 'absolute'添加到from对象，那么您就在正确的轨道上。

每次单击元素时如何使过渡工作

1 个答案: