CSS 动画不适用于所有 React 组件答案

【问题标题】：CSS animations not working on all React componentsCSS 动画不适用于所有 React 组件
【发布时间】：2020-01-08 12:46:50
【问题描述】：

我正在开发一个仪表板应用程序，该应用程序从各种来源获取公司数据，并将其呈现在 React 应用程序中的一些动画“图块”上。该应用程序将在超时后动态重定向到显示来自不同业务领域的数据的不同页面。这一切都按预期工作，但其中一些图块上的动画丢失了。

经过一番调查，我怀疑没有动画的图块数量总是等于上一页显示的图块数量（即我的第二页目前有 4 个图块，所以在重定向下一页上的前 4 个图块以进行动画处理），所以这里肯定有某种联系。

这是 Dashboard 类，它构建了整个事物。

import React, { Component } from "react"
import axios from "axios"
import { GridList, GridListTile } from "@material-ui/core"

import "../assets/scss/tile.scss"
import Request from "../config.json"
import DataTile from "./DiagnosticDataTile"
import Loader from "./Loader"
import { IDiagnosticResultData } from "../interfaces/IDiagnosticResultData"
import { RouteComponentProps, withRouter } from "react-router"

interface IPropsPassed {
  category: string
  redirect: string
}

type IProps = IPropsPassed & RouteComponentProps

interface IState {
  result: IDiagnosticResultData[]
  pageWillChange: boolean
  loading: boolean
}

class Dashboard extends Component<IProps, IState> {
  maxTilesPerRow = 4
  changeTimeInMinutes = 5

  constructor(props: IProps) {
    super(props)

    this.state = {
      loading: true,
      result: null,
      pageWillChange: false
    }
  }

  componentDidMount(): void {
    axios
      .get(Request.url)
      .then(response => {
        this.setState({ result: response.data })
        this.setState({ loading: false })
      })
      .catch(error => {
        console.log(error)
      });
  }

  GetCellHeight(data: IDiagnosticResultData[]): number {
    return window.innerHeight / Math.ceil(data.length / this.maxTilesPerRow)
  }

  GetColour(isOk: boolean): string {
    const purples = ["#7e4c84", "#68396c", "#744177", "#78477f"]

    return isOk ? this.Sample(purples) : "#cd1010"
  }

  Sample(colour: string[]): string {
    return colour[Math.floor(Math.random() * colour.length)]
  }

  NoOfColumns(data: IDiagnosticResultData[]): number {
    return Math.min(data.length, this.maxTilesPerRow)
  }

  changePageAfter(minutes: number): void {
    setTimeout(() => {
      this.props.history.replace(this.props.redirect)
    }, minutes * 60000)
  }

  render() {
    if (!this.props) { return null }

    if (this.state.loading) {
      return <Loader />
    } else {
      var data = this.state.result.filter(x =>
        x.categories.includes(this.props.category)
      )
      this.changePageAfter(this.changeTimeInMinutes)
      return (
        <GridList
          cols={this.NoOfColumns(data)}
          cellHeight={this.GetCellHeight(data)}
          className="tileList"
        >
          {data.map((object, i) => (
            <GridListTile
              key={i}
              className="tile"
              style={{
                animationDuration: `${Math.random() * 2 + 1}s`,
                background: `${this.GetColour(object.status === "OK")}`
              }}
            >
              <DataTile data={object} />
            </GridListTile>
          ))}
        </GridList>
      )
    }
  }
}

export default withRouter(Dashboard)

抱歉，如果此描述过于模糊。如果需要更多信息，我会尝试指定更多信息。

谢谢！

【问题讨论】：

标签： javascript css reactjs css-animations

【解决方案1】：

这是因为 <GridListTile /> 处的 key 属性不是唯一的。

我构建了一个简单的app here，其中的键是唯一的，same where the keys are not unique（见第 25 行）。

动画仅适用于新的 html 元素。如果键是唯一的，则反应将其作为新的 html 对象处理。

【讨论】：