Javascript 当Array.map在react.js中添加或删除Div时，将css动画应用于Div

如需参考，请查看此

我有css动画

@关键帧

类

 /*
    Animation classes.
 */

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

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

我正在应用这个

。当
array.map
有新添加的数据时，将
css类输入div。如下图所示

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

。。。

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

您可以在上面的stackblitz链接中查看演示，以查看更多详细信息，并在添加新列表时查看，只有最后一个div已设置动画，但我想设置第一个要设置动画的元素的动画，因为第一个div元素已添加到数组中。使用<代码>设置状态（prev=>[newtostate，…prev]）
我想问题出在这一行，您正在使用
索引
作为
行项目
的键

todoState.map（（项，索引）=>）

React不使用键的索引重新编译，请阅读更多


你需要有某种类型的id来唯一地标识你的待办事项，并在你执行
todoState.map（（item）=>…
）时使用该
id
作为键。因此，你必须将你的待办事项作为
对象
而不是
字符串

在您的
TodoForm
中，我们将添加一个
generateId
，并使用此函数为新todo的
id
返回值

TodoForm.tsx

函数generateId（）{
// https://stackoverflow.com/a/8084248/8062659
返回Math.random（）.toString（36）子字符串（7）；
}

const sendTodoItem=（e）=>{
如果（todoInput.trim（）.length>0）{
const text=todoInput.trim（）；
const id=generateId（）；
AddNewTodState（{text，id}）；//注意这里
setIsDisabled（假）；
setTodoInput（“”）；
}否则{
setIsDisabled（真）；
}
}

现在在您的
TodoListLineItem
上，我们将从
map
中删除
索引
，并使用当前todo的
id
作为键

TodoListLineItem.tsx

todoState.map（（项）=>）

我们还必须更新您的
行项目
，以显示当前todo的
文本
属性

行项目。tsx

{todoList.text}


检查这个演示

--

因为我们现在使用的是一个
对象
作为待办事项，我相信你也应该对应用程序的某些部分进行更改，比如模型和删除功能。但是上面的更改应该足以实现你在帖子中描述的目标。
我想问题出在这一行，你正在使用
索引
作为r您的
行项目

todoState.map（（项，索引）=>）

React不使用键的索引重新编译，请阅读更多


你需要有某种类型的id来唯一地标识你的待办事项，并在你执行
todoState.map（（item）=>…
）时使用该
id
作为键。因此，你必须将你的待办事项作为
对象
而不是
字符串

在您的
TodoForm
中，我们将添加一个
generateId
，并使用此函数为新todo的
id
返回值

TodoForm.tsx

函数generateId（）{
// https://stackoverflow.com/a/8084248/8062659
返回Math.random（）.toString（36）子字符串（7）；
}

const sendTodoItem=（e）=>{
如果（todoInput.trim（）.length>0）{
const text=todoInput.trim（）；
const id=generateId（）；
AddNewTodState（{text，id}）；//注意这里
setIsDisabled（假）；
setTodoInput（“”）；
}否则{
setIsDisabled（真）；
}
}

现在在您的
TodoListLineItem
上，我们将从
map
中删除
索引
，并使用当前todo的
id
作为键

TodoListLineItem.tsx

todoState.map（（项）=>）

我们还必须更新您的
行项目
，以显示当前todo的
文本
属性

行项目。tsx

{todoList.text}


检查这个演示

--

因为我们现在使用的是一个
对象
作为待办事项，我相信你也应该对应用程序的某些部分进行更改，比如模型和删除功能。但是上面的更改应该足以实现你在文章中描述的目的。
一个简单的方法是添加带有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>
}

import React，{useffect，useState}来自“React”
const YourApp=props=>{
const[animate，setAnimate]=useState（false）
const[todoState，setTodoState]=useState（[]）
useffect（（）=>{
设置动画（真）
setTimeout（（）=>{setAnimate（false）}，500）
}，[ToDestate]）
返回。。。
}

每次更新到state时，它基本上将应用动画类0.5秒。
一个简单的方法是添加带有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>
}

import React，{useffect，useState}来自“React”
const YourApp=props=>{
const[animate，setAnimate]=useState（false）
const[todoState，setTodoState]=useState（[]）
useffect（（）=>{
设置动画（真）
setTimeout（（）=>{setAnimate（false）}，500）
}，[ToDestate]）
返回。。。
}

每次更新todoState时，它基本上会应用动画类0.5秒。
当项目被删除时，那么如何应用到仅一个选定的要制作动画的div？这就是事情变得复杂的时候。我建议使用库。谢谢。我会签出它。但现在我应用自定义逻辑在一段时间内添加新的css removeClass时间和动画删除的项目div。你能有b吗