css - 更新道具时反应更新表格单元格（td）背景动画

Question

我有一个从道具获取数据的表。我希望每次获得新道具时，单元格（td）的背景动画都会改变。另外，我创建了一个动画背景来显示表格单元格已更新，但它仅在第一次创建每个单元格时显示背景，然后何时更新道具背景不显示。

import React from 'react'

import { TableRow, TableCell } from '@material-ui/core/'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
  cell: {
    background: 'none',
    animation: `$bgColor 3s`,
    animationIterationCount: 1
  },
  '@keyframes bgColor': {
    '0%': {
      background: '#aacc00'
    },
    '100%': {
      background: 'none'
    }
  }
}))

const RenderBodyTable = ({ rows, isClient, filter, dataRow }) => {
  const classes = useStyles()

  return rows.map(row => (
    <TableRow key={row.id}>
      <TableCell className={classes.cell}>{row.name}</TableCell>
      <TableCell className={classes.cell}>{row.family}</TableCell>
      <TableCell className={classes.cell}>{row.tell}</TableCell>
      <TableCell className={classes.cell}>{row.address}</TableCell>
    </TableRow>
  ))
}

export default React.memo(RenderBodyTable)

标签： cssreactjsanimation

Answer 1

您将需要添加一些逻辑来检测道具更改，然后在发生这种情况时更新样式。

目前，您的动画仅在页面加载时播放，因为您没有此逻辑。

有很多方法可以解决，但请查看本教程作为起点。