vue styled components animation leave

Как реализовать анимацию hasLeave - закрытия модального окна когда оно изчезает

мой компонент

<CaModal
  v-model:is-showed="isShowed">
  <template v-slot:header>
    <CaModalWrapper p="210px 0px 40px 0px">
      <CaModalContent
        :hasLeave="!isShowed"
        hasLeft

не работает именно анимация когда я хочу закрывать модалку

Мои пропсы в компоненте

  ${(props) => (props.hasLeft ? `
     animation: ${fadeleft} .4s ease ;

. : '')}; ${(props) => (props.hasLeave ? animation: ${fadeLeave} .4s ease; : '')}; ${(props) => (props.hasRight ? animation: ${faderight} .4s ease; ` : '')};

Тут флаги и анимации

export const fadeleft = keyframes`
from {
   transform: translateX(-50%);
   opacity: 0;
 }
  to {
   transform: translateX(0);
   opacity: 1;
   }
 `;

export const faderight = keyframes`
   from {
  transform: translateX(50%);
  opacity: 0;
 }
  to {
   opacity: 1;
     transition: transform 2s ease;
   }

`;

 const itemAnimations = {
  hasLeft: {
   type: Boolean,
   default: false,
  },
  hasRight: {
  type: Boolean,
  default: false,
    },
  hasLeave: {
    type: Boolean,
   default: false,
 },
};

   export const fadeLeave = keyframes`
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
       `;