具有条件渲染子组件的动画组件

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

const AnimatedComponent = () => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle Visibility</button>
      {isVisible && (
        <div className="animated-component">
          <div className={`content ${isVisible ? 'enter' : 'exit'}`}>
            This is the animated content.
          </div>
        </div>
      )}
    </div>
  );
};

export default AnimatedComponent;

/* AnimatedComponent.css */
.animated-component {
  position: relative;
  overflow: hidden;
}

.content {
  transition: all 0.5s ease-in-out;
}

.enter {
  opacity: 1;
  transform: translateY(0);
}

.exit {
  opacity: 0;
  transform: translateY(-20px);
}

.content {
  will-change: opacity, transform;
  transition: all 0.5s ease-in-out;
}

const MemoizedContent = React.memo(({ isVisible }) => (
  <div className={`content ${isVisible ? 'enter' : 'exit'}`}>
    This is the animated content.
  </div>
));

// 在父组件中使用MemoizedContent
{isVisible && <MemoizedContent isVisible={isVisible} />}