Material-UI多行TextField嵌套react-addons-css-transition-group过渡失效求助

嘿，我之前碰到过一模一样的情况！带multiline属性的TextField之所以会让过渡失效，核心原因是它最终渲染的是<textarea>元素，而非普通TextField的<input>——textarea的默认样式（比如高度自适应、内边距规则）会和react-addons-css-transition-group的动画逻辑冲突，直接导致过渡效果被覆盖或者根本不触发。

下面是亲测有效的解决方案，分步骤来：

1. 给TextField套一层容器，把过渡绑定到容器上 #

别直接用过渡组件包裹TextField，在外层加个div容器，让过渡动画基于这个容器执行，就能完美避开textarea自身样式的干扰。核心代码如下：

<CSSTransitionGroup
  transitionName="fade"
  transitionEnterTimeout={300}
  transitionLeaveTimeout={300}
>
  {this.state.show && (
    <div className="field-wrapper">
      <TextField
        multiline
        label="Multiline"
        rows="4"
        variant="outlined"
        fullWidth
      />
    </div>
  )}
</CSSTransitionGroup>

2. 调整过渡样式，用max-height配合opacity实现动画 #

因为textarea的高度由rows或内容决定，直接对它做高度过渡容易出问题。我们通过控制外层容器的max-height和opacity，实现淡入淡出+高度变化的自然过渡，对应的CSS样式：

/* 基础容器样式 */
.field-wrapper {
  width: 100%;
  margin-top: 16px;
}

/* 进入动画初始状态 */
.fade-enter {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

/* 进入动画激活状态 */
.fade-enter-active {
  opacity: 1;
  max-height: 220px; /* 根据你的TextField行数设置合适的最大值 */
  transition: opacity 300ms ease-in, max-height 300ms ease-in;
}

/* 离开动画初始状态 */
.fade-leave {
  opacity: 1;
  max-height: 220px;
}

/* 离开动画激活状态 */
.fade-leave-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 300ms ease-in, max-height 300ms ease-in;
}

3. 关键注意点 #

• 确保过渡组件的transitionEnterTimeout和transitionLeaveTimeout时长，与CSS里transition设置的时长完全一致，否则会出现动画中途被强制终止的问题。
• max-height的数值要比TextField实际渲染后的高度大一些，避免内容被意外截断。

完整可运行的核心代码示例 #

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import CSSTransitionGroup from "react-addons-css-transition-group";
import "./styles.css";

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

  toggle = () => {
    this.setState(prev => ({ show: !prev.show }));
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.toggle}>Toggle Input</button>
        <CSSTransitionGroup
          transitionName="fade"
          transitionEnterTimeout={300}
          transitionLeaveTimeout={300}
        >
          {this.state.show && (
            <div className="field-wrapper">
              <TextField
                multiline
                label="多行输入框"
                rows="4"
                variant="outlined"
                fullWidth
              />
            </div>
          )}
        </CSSTransitionGroup>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

对应的styles.css就是上面提到的样式内容，这样调整后，多行TextField的过渡效果就能正常触发啦。

内容的提问来源于stack exchange，提问作者Vincent Hoch-Drei