Question

我正在使用react.js，html和scss建立一个一页的网站。我正在努力使整个网站具有模糊效果或在单击按钮时淡入淡出（稍后将用于加载动画）。按下按钮后，我可以使用哪些命令来消除这种模糊？

  render() {
    return (
      <div className="App">
        <div className="top-bar">
          <div className="title">poem</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>
    )
  }
  fadeOut = () => this.setState({ fadingOut: true })
}

我希望单击按钮时整个页面会变得模糊不清或看起来像它。

Answer 1

所有您需要做的就是将样式应用于父div，您应该一切顺利！试一试

class App extends React.Component {
  state = { fadingOut: false }

  fadeOut = () => this.setState({fadingOut: true});

  render() {
    return (
      <div className="App" style={this.state.fadingOut ? {filter: 'blur(2px)'} : undefined }> 
        <div className="top-bar">
          <div className="title">
              poem
          </div>
        </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>
    );
  }  
}

See it in action!

单击按钮时如何使整个网页模糊

1 个答案: