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

Question

你好，各位开发人员反应好！

我正在尝试通过两个基本操作列出项目清单：添加项目和删除项目。

[我想做的是，每当我添加一个项目时，我希望它具有良好的淡入效果（新添加的项目会淡入），而当我删除它时，我希望它淡出（所删除的项目会褪色）。

在给定的实现上实现这种效果的最简单或最直接的方法是什么（或者如果需要对实现进行调整以达到效果，那也可以：））？

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;
}
.item-fadeout{
   display: flex;
   align-items: center;
   padding: 10px;
   margin: 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：

//import { useState } from 'react';
   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