reactjs div transition 不添加额外的库 当高度变化时 过渡

要在React中实现div高度变化时的过渡效果，可以使用CSS过渡属性和React的状态管理功能来实现。

首先，在CSS中定义一个过渡效果，如下所示：

.transition-div {
  transition: height 0.3s ease;
}

然后，在React组件中使用状态来控制div的高度，并在div上添加相应的类名：

import React, { useState } from 'react';

function MyComponent() {
  const [expanded, setExpanded] = useState(false);

  const toggleHeight = () => {
    setExpanded(!expanded);
  };

  return (
    <div className={`transition-div ${expanded ? 'expanded' : ''}`}>
      <button onClick={toggleHeight}>Toggle Height</button>
      {expanded && <p>Content</p>}
    </div>
  );
}

export default MyComponent;

在上面的代码中，我们使用useState钩子来管理expanded状态，该状态控制div的高度。当点击按钮时，toggleHeight函数将切换expanded状态的值。

通过在div上使用${expanded ? 'expanded' : ''}，我们根据expanded状态的值来添加或删除类名。

最后，我们可以在CSS中定义.expanded类名的样式，以实现高度变化的过渡效果：

.transition-div {
  transition: height 0.3s ease;
}

.expanded {
  height: 200px;
}

当expanded为true时，div的高度将过渡到200px。

这样，当点击按钮时，div的高度将平滑地过渡到200px，并在再次点击时回到初始高度