React-当Modal显示时，单独显示视图的原生标题动画

const [isModalVisible, setModalVisible] = useState(false);

{isModalVisible && (
  <div className="modal">
    <div className="modal-header">
      <h2 className="modal-title">Modal标题</h2>
    </div>
    {/* 其他Modal内容 */}
  </div>
)}

.modal-header {
  transition: all 0.3s ease;
}

.modal-title {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
}

.modal-header.show {
  opacity: 1;
}

.modal-header.show .modal-title {
  opacity: 1;
  transform: translateY(0);
}

const handleModalOpen = () => {
  setModalVisible(true);
};

const handleModalClose = () => {
  setModalVisible(false);
};

// 在合适的地方调用上述函数，例如点击按钮时
<button onClick={handleModalOpen}>打开Modal</button>

// 在Modal组件的根元素上添加类名以触发过渡效果
<div className={`modal-header ${isModalVisible ? 'show' : ''}`}>