我正在css中创建一个汉堡菜单。我想在汉堡关闭时卸载我的burgerBar。我想在我的转换完成后卸载它（这是一个滑出转换）。
问题是，我的函数handleTransitionEnd从来没有从onTransitionEnd调用过，即使我的转换已经完成。
你能帮帮我吗？
这是我的代码：

import React, { useEffect, useState } from 'react'
import Link from 'next/link';
import styles from './BurgerBar.module.scss';

export type BurgerBarProps = {
    active: boolean
}
const BurgerBar: React.FC <BurgerBarProps> = ({active}) => {

    const [hide, setHide] = useState(true);
    
    useEffect(() => {
        handleTransitionEnd(false);
    }, [active]);

    function handleTransitionEnd(callFromTransition:boolean) {
        console.log('FromTransition: ' + callFromTransition);
        if(active === false && callFromTransition === true){
            setHide(true);
        } if (active === true) {
            setHide(false);
        }
    }

  return (
    <div className={`${styles.bar} ${active ? '' : styles.desactive} ${hide ? styles.hide : ''}`} onTransitionEnd={() => handleTransitionEnd(true)}>
        <ul className={styles.listTitle}>
            <li>
                <Link href='/projet' className={styles.title}>
                    <img src="/icons/laptop.png" alt="laptop" className={styles.iconTitle}/>
                    PROJETS
                </Link>
            </li>
            ...
        </ul>
    </div>
  )
}
export default BurgerBar;

我的scss：

.bar{
    position: absolute;
    height: 100%;
    width: 30em;
    top: 0px;
    background-color: rgba(0,0,0,0.7);
    padding-left: 7em;
    
    animation: slide-in 0.3s forwards;
  
    @keyframes slide-in {
      from {
        right: -30em; // Start at its normal position
      }
      to {
        right: 0; // End offscreen to the right
      }
    }
}

@keyframes slide-out {
  from {
    right: 0; // Start at its normal position
  }
  to {
    right: -30em;
  }
}

.desactive{
  animation: slide-out 0.3s forwards;
}

.hide{
    display: none;
}