向 React 中的列表元素添加淡入动画

问题描述

我有以下代码使用 React 中的 axios 显示来自 Laravel 的表格数据。

数据实时显示。每次添加新元素时如何添加淡入动画？ https://socket.io/ 在右侧的示例中准确显示了我想要执行的操作。

请注意，li 标记中的元素是从创建控制器触发的事件中添加的。

组件：

import React,{Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import Echo from "laravel-echo";
 
class Patient extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            patients : [],};
    }

        componentDidMount() {
            axios.get('api/patients')
            .then(response => {this.setState({patients: response.data})})
            .catch(err => console.log(err));
            
            window.Echo.channel('home')
                .listen('NewPatient',newPatientData => {
                    this.setState({
                        patients: this.state.patients.concat(newPatientData)
                    })
                },e => {
                    console.log("Error",e)
                })
        }

        render() {
          return (
            <div>

<ul> { this.state.patients.slice(0).reverse().map(patient => <li>{patient.nom}</li>)} </ul>

            </div>
          )
        }
      }

export default Patient;

解决方法

您可以使用 CSS 动画轻松完成此操作。我在下面为您创建了一个示例，如果您查看 CSS，您将看到关键帧动画，然后由 .fadeIn 选择器使用，然后将该类应用于 <li> 元素.

https://codesandbox.io/s/dreamy-frog-r6sr8?file=/src/styles.css