输入搜索框过渡(宽度)不流畅

Question

我试图在焦点上扩展输入搜索框，并将其压缩到其原始状态，以从搜索框中失去焦点。我能够使用CSS过渡实现相同的目标。但是有时候我看到过渡并没有如示例所示。有什么最佳方法可以实现同样的方法吗？或对我的代码的任何建议，以达到平稳性。

在扩展时会导致兄弟姐妹组件也重新渲染，因为它正在扩展其。

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

我已经创建了一个代码扣来解决您的问题。请检查这是否对您有用。

请不要使用参考，而是使用状态。

  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