react点击滑块验证

css

.wrap-num {
  width: 300px;
}
@keyframes defaultWave {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.23);
  }
  40% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
// 旋转
@keyframes loadingWave {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1turn);
  }
}
@keyframes successRectBottom {
  0% {
    width: 0;
    border-top: 1px solid #00de76;
    border-bottom: 1px solid #00de76;
  }

  100% {
    width: 100%;
    border-top: 1px solid #00de76;
    border-bottom: 1px solid #00de76;
  }
}
.verify-success {
  animation: var(--succesbottom);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.verify-wrap {
  position: relative;
  background-color: white;
  display: flex;
  padding: 4px;
  border-radius: 2px;
  border: var(--border);
  //   阴影
    &:hover {
      border: 1px solid #a0f3cc;
      box-shadow: 0 0 5px 1px #a0f3cc;
    }
  .out-silder-circle {
    width: 38px;
    height: 38px;
    position: absolute;
    z-index: 1;
    border-radius: 50px;
    animation: var(--aleftx);
    background: var(--background);
  }
  .verify-left {
    overflow: hidden;
    margin-right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(195, 239, 232, 0.9);
    .left-conter {
      animation: var(--aleft);
      position: absolute;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      background-image: linear-gradient(0deg, #3a9afa, #00de76);
      border-radius: 50px;
    }
  }
  .verify-right {
    display: flex;
    align-items: center;
    flex: 1;
    color: var(--textcolor);
  }
}

子组件
import React, { CSSProperties, useState } from 'react';
import './index.less';
export default function VerifyPage(props: any) {
  const { resultData, setResultData } = props;

  const data = ['点击此智能验证后在发送验证码', '智能检测中', '验证成功'];
  //   const [resultData, setResultData] = useState(0); //data下标
  const [aleftx, setAleftx] = useState<string>(''); // 智能检测中旋转动画
  const [aleft, setAleft] = useState<string>('defaultWave 1.5s ease infinite'); //初次动画
  const [background, setBackground] = useState<string>('transparent'); //旋转按钮背景颜色
  const [borderv, setBorder] = useState<string>('1px solid rgb(212, 205, 205)'); //边框颜色
  const [succesbottom, setSuccesbottom] = useState<string>(''); // 上下边框动画效果
  const [textcolor, setTextcolor] = useState<string>(''); // 文字颜色
  const handleVerify = () => {
    setResultData(1);
    setAleftx('loadingWave 1s infinite');
    setBackground(`linear-gradient(
      rgba(0, 222, 118, 0.8),
      rgba(0, 222, 118, 0.4),
      rgba(0, 222, 118, 0.3),
      rgba(0, 222, 118, 0.2)
    )`);
    setAleft('');
    const timer = setTimeout(() => {
      setResultData(2);
      setSuccesbottom('successRectBottom 1.5s');
      setAleftx('');
      setBackground('');
      setAleft('');
      clearTimeout(timer);
      setTextcolor('#00de76');
      const valuetime = setTimeout(() => {
        setBorder('1px solid #00de76'); // 外层边框颜色
        clearTimeout(valuetime);
      }, 1000);
    }, 2000);
  };
  return (
    <div
      className="verify-wrap"
      style={{ '--aleft': aleft, '--border': borderv } as CSSProperties}
      onClick={handleVerify}
    >
      <div
        className="verify-success"
        style={{ '--succesbottom': succesbottom } as CSSProperties}
      ></div>
      <div className="verify-left">
        <div
          className="out-silder-circle"
          style={{ '--aleftx': aleftx, '--background': background } as CSSProperties}
        ></div>
        <div className="left-conter" style={{ '--aleft': aleft } as CSSProperties}>
          <svg width="12px" height="14px" viewBox="0 0 200 255">
            <g id="Page3" stroke="#eeeeee" strokeWidth="1" fill="none" fillRule="evenodd">
              <g id="Group3" fill="#ffffff" fillRule="nonzero">
                <path
                  d="M192.215987,31.5402031 C190.026012,31.619176 187.868479,31.6497744 185.757709,31.6497744 L185.748648,31.6497744 C130.221833,31.6497744 105.760339,6.2755772 105.556627,6.05672609 L100.008184,0 L94.4518488,6.05672609 C94.2095573,6.32191195 68.3980713,33.5987437 7.78430533,31.5402029 L2.8561292e-07,31.2753086 L0,146.302981 C0,176.418758 10.0841737,220.345176 97.2848165,253.952079 L100.000584,255 L102.715183,253.952079 C189.915826,220.345176 200,176.418467 200,146.302981 L200,31.2753086 L192.215987,31.5402031 Z"
                  id="Shape3"
                ></path>
              </g>
            </g>
          </svg>
        </div>
      </div>
      <div className="verify-right" style={{ '--textcolor': textcolor } as CSSProperties}>
        {data[resultData]}
      </div>
    </div>
  );
}

父组件
import React, { useState } from 'react'
import './index.less'
import VerifyPage from './verify-page'
export default function ceshi() {
  const [resultData, setResultData] = useState(0); //data下标
  console.log(resultData);
  
  return (
    <div className='wrap-num'>
      <VerifyPage resultData={resultData} setResultData={setResultData}></VerifyPage>
    </div>
  )
}