在 React 组件中为 <Button> 添加淡入淡出/动画

Question

目前，我已经创建了一个授权组件，该组件在接受对表单所做的新更改之前检查本地 AD 用户名/密码。用户单击“身份验证”后，该函数需要几秒钟的时间才能验证用户。由于该按钮不会动画或消失，因此用户可以多次单击它，从而导致问题。我正在尝试对此按钮实现简单的淡入淡出/动画，但很难实现一些建议。如果您对如何实现或要研究哪些 React 插件有任何建议，我们将不胜感激。                 <DialogActions>                    <Button onClick={() => props.onClose(ConfirmationDialogButtons.CANCEL)} color="primary">                        Cancel                    </Button>                    <Button onClick={handleSign} color="primary">                        Authenticate                    </Button>                </DialogActions>这是 onClick={handleSign} 代码。const handleSign = async () => {        const srv = new DataServer()        const result = await srv.eSignature(formData.userId, formData.password, props.securityArea, props.prompt, formData.comment)        if(result.error === 0) {            sessionStorage.setItem("Authenticated" , JSON.stringify({Authenticated : true , time : new Date()}))            props.onClose(ConfirmationDialogButtons.OK)        }        else {            setSignError(result.error)        }    }

Answer 1

你可以使用像material ui 这样的组件库，它会自动淡出你的按钮