为React中的列表元素添加渐隐动画

Question

我有下面的代码显示一个表的数据从Laravel使用axios在React。

数据实时显示。如何在每次添加新元素时添加渐隐动画?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