问题描述
我有以下代码使用 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