React组件封装(loading动画)

最新推荐文章于 2024-06-20 09:15:34 发布

本地跑没问题

最新推荐文章于 2024-06-20 09:15:34 发布

阅读量90

点赞数

文章标签： react.js 前端前端框架 javascript css html5

本文链接：https://blog.csdn.net/weixin_59742742/article/details/134971977

版权

思路

在这里插入图片描述

实现如图的动画效果
每个字的动画效果是一样的，但是开始时间不一样
我们进行组件封装，增加复用性
可以实现不用文字的变化

代码

import React from 'react'
import './index.css'
export default function Loading(props) {
    let array = props.array
    array = Array.isArray(array)?array:[...array]
    console.log(array);
  return (
    <div className='loading'>
        {
            array.map((item,index,obj) => {
                return <span data-index = {index} style={{'--index':index}}>{item}</span>
            })
        }
    </div>
  )
}

@keyframes loadingWord {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-16px);
    }
  }

.loading {
    margin: 100px;
    height: 100px;
    line-height: 100px;
  }
  .loading > span {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: loadingWord 800ms ease-in infinite alternate;
    animation-delay: calc(var(--index) * 100ms + 200ms);
  }

import Loading from '../../component/loading';
import './App.css';

function App() {
  return (
    <div className='app'>
        <Loading array={"downloading..."}></Loading>
    </div>
  );
}

export default App;