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

Question

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

数据实时显示。 每次添加新元素时，如何添加淡入 animation？ https://socket.io/在右侧的示例中准确显示了我想要做的事情。

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

组件：

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，您将看到关键帧 animation 然后由.fadeIn选择器使用，然后将<li>元素应用于 D。

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