將淡入 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