css - 页面加载时输入文本和段落的过渡 CSS 以及它们何时出现

Question

如何在页面加载时在输入文本字段上添加看起来像进度条的过渡？该网站创建一个短网址。您可以看到，当创建短网址时，输入和按钮消失了。我想要所有组件出现时的进度类型转换。

render() {
    return (
      <div>
       
        <div className="metrics">
          
          { this.state.active!==true ? 
          <>
          <input
            placeholder="Paste your URL here"
            onChange={(event) => this.setState({ longUrl: event.target.value })}
          />

          <button
            className="buttons"
            disabled={this.state.active}
            onClick={this.handleButtonShortUrl}
          >
            ShortURL
          </button>
          </> : null }
          <div className="shortcopy">
            {this.state.active ? (
              <>
            <p className="shorturl">{this.state.shortUrl}</p>

              <button
                className="buttons"
                onClick={() => {
                  navigator.clipboard.writeText(this.state.shortUrl);
                  alert("short URL copied");
                }}
              >
                <FileCopySharpIcon style={{fill: "white"}}/>
              </button>
              </>
            ) : null}
          </div>
          <div className="apicopy">
            {this.state.active ? (
              <>
                <p className="apikey">{this.state.apiKey}</p>

                <button
                  className="buttons"
                  onClick={() => {
                    navigator.clipboard.writeText(this.state.apiKey);
                    alert("apiKey copied");
                  }}
                >
                  <FileCopySharpIcon style={{fill: "white"}}/>
                </button>
              </>
            ) : null}
          </div>
          {this.state.active ? (
            <button className="buttons" onClick={this.handleButtonNewShortUrl}>
              {" "}
              New short url
            </button>
          ) : null}
        </div>

标签： cssreactjs