React - 添加时淡入，删除项目时淡出

Question

各位 React 开发者大家好！

我正在尝试创建一个项目列表，有两个基本操作：添加项目和删除项目。

我想做的是每当我添加一个项目时，我希望它有一个很好的淡入效果（新添加的项目淡入），当我删除它时，我希望它淡出（删除的项目淡出） 。

在给定的实现上实现这种效果的最简单或最直接的方法是什么（或者如果需要调整实现来做到这一点，那也有效:)）？

function App() {
  const [items, setItems] = useState([]);

  return (
    <div>
      <button 
       className='button-add' 
        onClick={() => setItems([...items, {
            id: new Date().getUTCMilliseconds().toString()}])}
      >
        Add item
      </button>
      {items.map(item => (
        <div className='item'>
          <span className='item-name'>{item.id}</span>
        <button className='button-remove' onClick={() => setItems(items.filter((itemInner) => itemInner.id !== item.id))}>Remove item</button>
        </div>
      ))}
    </div>
  )
}

Codepen 上的工作示例（添加/删除）

Answer 1

关键帧就是您要寻找的。

我想出了这个解决方案，您可能需要调整它以满足您的需求：

CSS 文件：

.item {
    -webkit-animation: fadein .3s linear forwards;
    animation: fadein .3s linear forwards;
    padding: 10px;
}
.item-fadeout{
    display: flex;
    align-items: center;
    padding: 10px;
    -webkit-animation: fadeout .3s linear forwards;
    animation: fadeout .3s linear forwards;
}
    
@-webkit-keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
    
@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
    
@-webkit-keyframes fadeout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
    
@keyframes fadeout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

JS：

const { useState } = React;
    
function Item(props) {
    const [isFadingOut, setIsFadingOut] = useState(false);
    
    const fadeOut = (cb) => {
        setIsFadingOut(true);
        cb();
    };
    const handleRemoveItem = () => {
        props.removeItem();
        setIsFadingOut(false);
    };
    return (
        <div className={isFadingOut ? 'item-fadeout' : 'item'}>
            <span className='item-name'>{props.item.id}</span>
            <button
              className='button-remove'
              onClick={() => fadeOut(setTimeout(() => handleRemoveItem(), 300))}
            >
                Remove item
            </button>
        </div>
    );
}
    
function App() {
    const [items, setItems] = useState([]);
    
    return (
        <div>
            <button
              className='button-add'
              onClick={() =>
                setItems([
                    ...items,
                    {
                        id: new Date().getUTCMilliseconds().toString(),
                    },
                ])
              }
            >
                Add item
            </button>
            {items.map((item) => (
                <Item
                  item={item}
                  removeItem={() =>
                      setItems(items.filter((itemInner) => itemInner.id !== item.id))
                  }
                />
            ))}
         </div>
    );
}
    
ReactDOM.render(<App />, document.getElementById('app'));

工作示例：https ://codepen.io/luismendes535/pen/YzyJXdR