css - 输入搜索框过渡(宽度)不平滑

Question

我试图在焦点上扩展输入搜索框，并在失去搜索框焦点时将其压缩到原始状态。我能够使用 css transition 实现相同的效果。但有时我发现过渡并不顺利，如示例所示。有什么最好的方法可以达到同样的目的吗？或对我的代码的任何建议以实现流畅。

在扩展它时导致同级组件也重新渲染，因为它正在扩展它。

react 代码:

 <div className="header" style={{ width: "420px"}} ref={(searchHeader) => { this._searchHeader = searchHeader }}>
      <label className="label">{"Search here"}</label>
      <div className="SearchBox">
           <input className="input" spellCheck={false} onFocus={this.onFocus} onBlur={this.onBlur} />
           <div className="search-icon">
                <span className="Search-icon" />
          </div>
      </div>
 </div>




private onFocus = (): void => {
        if (this._searchHeader) {
            this._searchHeader.style.width = "1000px";
        }
    }

    private onBlur = (): void => {
        if (this._searchHeader) {
            this._searchHeader.style.width = "420px";
        }
    }

CSS:

.label{
        width: 110px;
        padding-top: 6px;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.5);
}

.header {
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
        -webkit-transition: width 2s linear; /* Safari*/
        transition: width 2s linear;
}

.input{
        align-self: stretch;
        min-width: 200px;
        padding: 0 6px;
}

Answer 1

我已经创建了一个代码库来解决您的问题。请检查这是否适合您。

请不要使用 refs，而是使用 state。

  onFocus() {
    // console.log('OnFocus', this);
    this.setState({
      isFocused: true
    })
  }

  onBlur() {
    // console.log('onBlur', this);
    this.setState({
      isFocused: false
    })
  }

https://codepen.io/Harsh89/pen/GQQPxK?editors=1111