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

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!