Question

任何人都知道如何在React中实现在YouTube等热门网站上看到的灰色内容加载动画。最好没有图书馆，但欢迎图书馆建议。

感谢。

Answer 1

您可以创建自己的方式，但有很多方法，但我使用的方法很容易设计和使用。

https://github.com/danilowoz/react-content-loader

试试这个。

Answer 2

如果你想自己编写代码，这里有一个教你如何实现它的教程。主要是创建2层，下层是创建css3动画效果，上层是显示你想要的内容图像。

logic explaination

这里是教程，代码和解释。（用中文，用谷歌翻译） https://www.jianshu.com/p/bd1d24e1ab9e

如果你想使用插件，这里是最常用的插件 https://www.npmjs.com/package/react-content-loader

放置加载效果的位置 如果要在组件中对部分使用加载效果，则应将其放在使用Ajax / axios的位置。 1）在调用ajax之前添加加载效果。 2）在ajax成功或错误后删除加载效果。如果要对整个组件使用加载效果，可以放入组件的根目录，然后在数据到达后将加载设置为false。例如

class Component extends Component {
    constructor(props) {
    super(props);
    this.state = {
       loading: true
    };
   }

    componentDidMount() {
       axios.get('xxxx')
        .then(function (response) {
           //success
           this.setState({
           loading: false
        })
     })
   }

   render() {
      return (
       <div>
       {
          this.state.loading
          ? <div Loading />
          : <div>Page Content</div>
       }
      </div>
   )
   }

}

Answer 3

我认为您可以使用一些div并填充灰色 componentDidMount()。然后提出AJAX请求，并将div替换为真实内容

Answer 4

如果你真的想用css进行实现并对组件进行反应，你可以从这里得到一个想法：https://www.leejamesrobinson.com/blog/loading-placeholder-with-sass/

但是有很多库可以帮助您加载内容，例如：

对内容加载器做出反应：https://github.com/danilowoz/react-content-loader 反应占位符：https://github.com/buildo/react-placeholder

希望这会对你有所帮助。

内容在React中加载占位符动画

4 个答案: