当 Array.map 添加或删除 react.js 中的 div 时，将 css 动画应用于 div答案

【问题标题】：Apply css Animation to Div when Array.map added or remove div in react.js当 Array.map 添加或删除 react.js 中的 div 时，将 css 动画应用于 div
【发布时间】：2020-08-10 08:14:35
【问题描述】：

供参考，看看这个StackBlitz Link

我有css动画@keyframes类..

 /*
    Animation classes.
 */

.example-enter {
   animation: flasher 0.5s;
}

@keyframes flasher{
   from {
      opacity: 0.2;
   }
   to {
     opacity: 1;
   }
}

当array.map 有新添加的数据时，我将这个.example-enter css 类应用于div。如下所示..

<div className="example-enter"> ... </div>

问题是当我向 state 添加新的 Array 时，react 将创建新的 div，并且只为最后添加的 div 提供动画。但是我希望在向数组添加新状态时为第一个元素设置动画，而不是最后一个。

您可以查看上面 stackblitz 链接中的演示以查看更多详细信息，并在我们添加新列表时看到那里只有最后一个 div 动画但我想动画第一个元素以动画，因为第一个 div 元素是我添加到数组.使用..setTodoState( prev => [newTodoState, ...prev ]);

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

我猜问题出在这条线上，您使用index 作为LineItem 的键。

todoState.map((item, index) => <LineItem key={index} todoList={item} index={index}/>)

React 不建议使用索引作为键，阅读更多here。

您需要有某种id 来唯一标识您的待办事项，并在您执行todoState.map((item) => ... 时使用该id 作为键。因此，您必须将待办事项设为 object 而不是 string。

在您的TodoForm 中，我们将添加一个generateId 并将此函数的返回值用于我们新的待办事项id。

TodoForm.tsx

function generateId() {
  // https://stackoverflow.com/a/8084248/8062659
  return Math.random().toString(36).substring(7);
}

const sendTodoItem = (e) => {
  if(todoInput.trim().length > 0){
    const text = todoInput.trim();
    const id = generateId();

    addNewTodoState({ text , id }); // notice here
    setIsDisabled(false);
    setTodoInput('');
  }else{
    setIsDisabled(true);
  }
}

现在你TodoListLineItem，我们将从map 中删除index，并使用当前待办事项的id 作为键。

TodoListLineItem.tsx

todoState.map((item) => <LineItem key={item.id} todoList={item}/>)

我们还必须更新您的Line-Item 以显示当前待办事项的text 属性。

Line-Item.tsx

<p>{todoList.text}</p>

查看此link 以获取演示。

因为我们现在使用object 作为待办事项，我相信您还应该对应用程序的某些部分进行更改，例如模型和删除功能。但是上面的更改应该足以实现您在帖子中描述的内容。

【讨论】：

当item被移除时，如何应用到只有一个选定的div上进行动画处理？
事情变得复杂了。我会为此建议React Transition Group library。
谢谢。我会检查它。但现在我应用自定义逻辑在一段时间内添加新的 css removeClass 并为删除的项目 div 设置动画。您能否为大规模生产就绪的应用程序开发提供最佳推荐的 React 动画库。
我只尝试过 React Transition Group - 我相信这是一个不错的选择！您可以在 GitHub 上查看它的 repo。

【解决方案2】：

一种简单的方法是使用 useEffect 添加动画类，并在动画持续时间后将其删除。

import React, {useEffect, useState} from 'react'

const YourApp = props => {
 
  const [animate, setAnimate] = useState(false)
  const [todoState, setTodoState] = useState([])

  useEffect(() => {
    setAnimate( true )
    setTimeout( () => { setAnimate( false ) }, 500 )
  }, [todoState])


  return <div className={ animate ? "example-enter" : null } > ... </div>
}

每次更新todoState，基本上都会应用动画类0.5s。

【讨论】：