如何在React中为div添加过渡效果实现滑动显示/隐藏切换？

嘿，我看你已经搭好了状态切换的基础框架，接下来咱们把滑动过渡效果补上，让这个交互变得更丝滑！

首先先补全并优化你现有的React代码，注意React里要使用className而非原生的class属性，这是新手很容易踩的小坑：

import React, { Component } from 'react';
import './App.css'; // 引入样式文件

class App extends Component {
  constructor() {
    super();
    this.state = { myclass: '' };
    this.divclicked = this.divclicked.bind(this);
  }

  divclicked() {
    // 用函数式更新确保拿到最新状态，避免异步更新的问题
    this.setState(prevState => ({
      myclass: prevState.myclass === '' ? 'coolclass' : ''
    }));
  }

  render() {
    return (
      <div className="container">
        <button onClick={this.divclicked}>点击切换显示/隐藏</button>
        {/* 通过className拼接来切换状态 */}
        <div className={`toggle-div ${this.state.myclass}`}>
          这是要滑动显示/隐藏的内容哦～可以随便替换成你需要的内容
        </div>
      </div>
    );
  }
}

export default App;

接下来在App.css里添加核心的滑动过渡样式，这里我们用max-height来实现平滑滑动（因为height: auto无法直接添加过渡动画）：

/* 默认收起状态 */
.toggle-div {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #f5f5f5;
  padding: 0 16px;
  margin-top: 8px;
}

/* 展开状态 */
.toggle-div.coolclass {
  max-height: 200px; /* 设置一个足够容纳内容的高度值，内容多的话可以调大 */
  padding: 16px;
  transition: max-height 0.3s ease-in;
}

关键逻辑说明 #

• 状态切换优化：把原来的条件判断改成函数式更新，能确保我们拿到的是最新的状态值，避免React状态异步更新带来的逻辑错误。
• 滑动过渡原理：通过切换max-height的值，配合overflow: hidden，模拟出滑动展开/收起的效果；transition属性控制动画的时长和缓动曲线，让过渡更自然。
• 样式细节：同时切换padding是为了让内容的边距也有平滑变化，不会出现内容突然“跳出来”的突兀感。

如果你的内容高度不确定，只要把max-height设得比内容最大高度大一些就可以啦～

内容的提问来源于stack exchange，提问作者craftdeer