Javascript 如何在单击按钮时添加加载动画?
对于我的网站,当点击按钮时,屏幕会模糊。我现在尝试在按下按钮时在模糊的上方添加一个旋转圆的加载动画,但是,我遇到了很多问题。当我试图让按钮点击have“isActive”,然后使loader类div处于活动状态时,整个网站崩溃了 js文件代码:Javascript 如何在单击按钮时添加加载动画?,javascript,html,css,reactjs,web,Javascript,Html,Css,Reactjs,Web,对于我的网站,当点击按钮时,屏幕会模糊。我现在尝试在按下按钮时在模糊的上方添加一个旋转圆的加载动画,但是,我遇到了很多问题。当我试图让按钮点击have“isActive”,然后使loader类div处于活动状态时,整个网站崩溃了 js文件代码: import React from "react"; import "./App.scss"; class App extends React.Component { state = { fadingOut: false } fade
import React from "react";
import "./App.scss";
class App extends React.Component {
state = { fadingOut: false }
fadeOut = () => this.setState({fadingOut: true});
render() {
return (
<div className="App" style={this.state.fadingOut ? {filter:
'blur(0.35vw)'} : undefined }
>
<div className="top-bar">
<div className="title">
.datapoems
</div>
<img className="logo" src="./logo.png"/>
</div>
<div className="container">
<div className="sloganLineOne">Poem Theme</div>
<div className="sloganLineTwo">Detector</div>
<textarea className="inputField" placeholder="Please Enter
Your Poem Here..."></textarea>
<button className="button" onClick=
{this.fadeOut}>Enter</button>
<img className="leftTriangle"
src="./leftSideTriangle.png"/>
<img className="rightTriangle"
src="./rightSideTriangle.png"/>
</div>
</div>
);
}
}
export default App;
我接受了您的代码并对其进行了一点修改,以实现您想要的结果(根据我从您的问题中了解的情况)
类应用程序扩展组件{
状态={fadingOut:false};
淡出=()=>this.setState({fadingOut:true});
render(){
const contentStyle=this.state.fadingOut
?{filter:“模糊(0.35vw)”}
:未定义;
const loadingIndicator=this.state.fadingOut(
--加载图标--
):null;
返回(
.数据诗
诗歌主题
探测器
进来
{loadingIndicator}
);
}
}
常量装入器样式={
位置:“绝对”,或位置:“固定”
排名:0,
底部:0,
左:0,,
右:0,,
显示:“flex”,
辩护内容:“中心”,
对齐项目:“中心”
};
当点击按钮时,该代码可以工作并放置“加载图标”字样,但有没有办法让它在webkit动画中实际包含我的图像和scss代码?您必须将scss加载程序添加到webpack:(我想,您已经完成了)。然后将
--加载图标--
文本替换为
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-bottom: 16px solid blue;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
class App extends Component {
state = { fadingOut: false };
fadeOut = () => this.setState({ fadingOut: true });
render() {
const contentStyle = this.state.fadingOut
? { filter: "blur(0.35vw)" }
: undefined;
const loadingIndicator = this.state.fadingOut ? (
<div style={loaderStyle}>-- Loading icon --</div>
) : null;
return (
<div className="App" style={{ position: "relative" }}>
<div style={contentStyle}>
<div className="top-bar">
<div className="title">.datapoems</div>
<img className="logo" src="./logo.png" />
</div>
<div className="container">
<div className="sloganLineOne">Poem Theme</div>
<div className="sloganLineTwo">Detector</div>
<textarea
className="inputField"
placeholder="Please Enter Your Poem Here..."
/>
<button className="button" onClick={this.fadeOut}>
Enter
</button>
<img className="leftTriangle" src="./leftSideTriangle.png" />
<img className="rightTriangle" src="./rightSideTriangle.png" />
</div>
</div>
{loadingIndicator}
</div>
);
}
}
const loaderStyle = {
position: "absolute", // or position: "fixed"
top: 0,
bottom: 0,
left: 0,
right: 0,
display: "flex",
justifyContent: "center",
alignItems: "center"
};