reactjs - 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>
  )
}

Working example (add/remove) on 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