时间戳

首页 > 解决方案 > 如何将 CSS 动画添加到 ReactJs 组件

html - 如何将 CSS 动画添加到 ReactJs 组件

问题描述

我正在开发一个会渲染加载动画的反应组件。

这是js文件

import React from 'react'
import './css/CircleSpinner.css'


const CircleSpiner = () => {
    return (
        <div className="lds-circle" >

        </div>
    )
}

export default CircleSpiner

CSS 位于单独的文件中，并且组件未按预期呈现动画。任何帮助，将不胜感激。

这是上面的代码沙箱。

标签： htmlcssreactjs

解决方案

您需要内容或绘制圆圈：

.lds-circle > div {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 1px solid #000;
  color: black;
  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

您缺少border: 1px solid #000;或内容，因此您可以查看圈子。

还要定义 CircleSpiner 并在你的 app.js 上使用它：

CircleSpiner.js

import React from 'react'


const CircleSpiner = () => {
    return (
        <div>
        </div>
    )
}

应用程序.js

export default CircleSpiner

import "./styles.css";
import CircleSpiner from "./CircleSpiner"

export default function App() {
  return (
    <div className="App">
      <div className="lds-circle">
      <CircleSpiner></CircleSpiner>
        </div>
    </div>
  );
}

推荐阅读