React设置容器高度动画

import React, { useState } from 'react';
import './styles.css';

function AnimatedContainer() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className={`container ${isExpanded ? 'expanded' : ''}`} onClick={() => setIsExpanded(!isExpanded)}>
      Click me to expand/collapse
    </div>
  );
}

export default AnimatedContainer;

/* styles.css */
.container {
  height: 100px;
  background-color: lightblue;
  transition: height 0.5s ease-in-out;
}

.expanded {
  height: 200px;
}

import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';

function AnimatedContainer() {
  const [isExpanded, setIsExpanded] = useState(false);
  const props = useSpring({ height: isExpanded ? 200 : 100 });

  return (
    <animated.div style={props} onClick={() => setIsExpanded(!isExpanded)}>
      Click me to expand/collapse
    </animated.div>
  );
}

export default AnimatedContainer;