react点击滑块验证

1.  css

   .wrap-nums {
     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: 1.2px solid #00de76;
       border-left: 1px solid #00de76;
     }
   
     100% {
       width: 100%;
       border-top: 1px solid #00de76;
       border-bottom: 1px solid #00de76;
       border-left: 1px solid #00de76;
     }
   }
   
   .verify-success {
     animation: var(--succesbottom);
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
     box-sizing: border-box;
   }
   .verify-wrap {
       overflow: hidden;
     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: 38px;
       height: 38px;
       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);
     }
   }
   
   
   .boxword {
     overflow: hidden;
     white-space: nowrap;
     animation: changeWidth 0.5s ease-in-out alternate infinite;
   }
   
   @keyframes changeWidth {
     from {
         width: 75px;
     }
     to {
         width: 84px;
     }
   }
   

   　　

2. 　子组件

   import React, { CSSProperties, useState } from 'react';
   import './index.less';
   /**
    * 滑块验证
    */
   export default function VerifyPage(props: any) {
     const { resultData, setResultData } = props;
     const 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 #d9d9d9'); //边框颜色
     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)
       )`);
       setTextcolor('');
       setAleft('');
       const timer = setTimeout(() => {
         setResultData(2);
         setSuccesbottom('successRectBottom 1s');
         setBorder('');
         setAleftx('');
         setBackground('');
         setAleft('');
         clearTimeout(timer);
         setTextcolor('#00de76');
         const valuetime = setTimeout(() => {
           setBorder('1px solid #00de76'); // 外层边框颜色
           setSuccesbottom('');
           clearTimeout(valuetime);
         }, 1000);
       }, 2000);
     };
     return (
       <div
         className="verify-wrap"
         style={{ '--aleft': aleft, '--border': borderv } as CSSProperties}
         onClick={()=>{
           resultData
           if (resultData===2) {
             return;
           }else {
             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}>
           {resultData == 1 ? <span className="boxword">{data[1]}....</span> : data[resultData]}
         </div>
       </div>
     );
   }
   

   　　

3. 父组件

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