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

Question

我有以下代码使用 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;

Answer 1

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

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