我需要復制這個動畫，我有一些麻煩讓所有的部分工作。到目前為止，我已經讓它工作到文本框f所在的位置，但是當我試圖關閉文本框時，動畫沒有切換回來。& ltTranstion & gt組件重置所有的動畫，而不是讓它們處于結束狀態，這使我不得不添加事件偵聽器來手動設置樣式，使它們保持不變。我不知所措，不知道該怎么辦，有人可以幫助e解決這個問題嗎？下面是我的Vue組件。

<script setup lang="ts">
  import {ref} from 'vue';
  import type { Ref } from 'vue';
  import {onMounted} from 'vue';
  import {animate} from 'motion';

  let plusButtonComplete: Ref<boolean> = ref(false);
  let plusButtonClicked: Ref<boolean> = ref(false);
  let titleAnimationComplete: Ref<boolean> = ref(false);
  let textFrameAnimationComplete: Ref<boolean> = ref(false);
  let closeTextFrameClicked: Ref<boolean> = ref(false);

  onMounted(()=>{

    const animatedTitle = document.getElementById('animatedTitle');
    const textFrame = document.getElementById('textFrame');

    document.getElementById('plusButton')!.addEventListener('animationend', ()=>{
     plusButtonComplete.value = true;
     plusButtonClicked.value = false;
     console.log('button complete', plusButtonComplete);
    });
    
    animatedTitle!.addEventListener('animationend', ()=>{
     animatedTitle!.style.opacity = '0';
     titleAnimationComplete.value = true;
     console.log('title complete', titleAnimationComplete);
    });

    textFrame!.addEventListener('animationend', ()=>{
      textFrameAnimationComplete.value = true;
      textFrame!.style.height = '100%';
      textFrame!.style.width = '100%';
      textFrame!.style.borderRadius = '0';
      textFrame!.style.top = '0';
      document.getElementById('textContainer')!.style.pointerEvents = 'auto';
    })

    
  });
  
  const toggleBack = ()=>{
    console.log('toggle clicked');
    document.getElementById('textFrame')!.style.display = 'none';
    document.getElementById('animatedTitle')!.style.opacity = '1';
    plusButtonClicked.value = false;
    closeTextFrameClicked.value = true;
    console.log(plusButtonClicked.value, closeTextFrameClicked.value);
  }
</script>

<template>
  <section class="page bg-cover w-full h-full grid-cols-12 grid-rows-6">

    <div class="bg-burgundy
              row-start-1
              row-span-6
              col-start-1
              sm:col-end-4"
    ></div>

    <h1 v-show="!plusButtonComplete"
       class="title
              text-right
              sm:col-start-3
              md:col-start-2
              lg:col-start-1
              sm:col-span-9
              sm:row-start-3
              sm:row-span-2
              bg-white
              sm:text-[length:var(--text-ultraJumbotron-2)]
              md:text-[length:var(--text-ultraJumbotron-5)]"
    >
      Explore
    </h1>

    <Transition name="titleAnimation">
      <h1 id="animatedTitle"
          v-show="plusButtonComplete"
          class="title
              text-right
              sm:col-start-3
              md:col-start-2
              lg:col-start-1
              sm:col-span-9
              sm:row-start-3
              sm:row-span-2
              bg-white
              sm:text-[length:var(--text-ultraJumbotron-2)]
              md:text-[length:var(--text-ultraJumbotron-5)]"
    >
      Explore
    </h1>
    </Transition>

    <img class="
               .plusButton
               sm:w-[var(--xTiny-1-3)]
               col-start-3
               col-end-4
               row-start-5
               row-end-6
               "
      v-show="!plusButtonClicked"
      @click="plusButtonClicked = true"
      src="./assets/Plus.svg"
    />
    <p class="
        details
        text-white
        align-center
        sm:text-[length:var(--text-widget-3)]
        md:text-[length:var(--text-article-3)]
        col-start-3
        col-end-9
        row-start-5
        row-end-6"
    >
      more details
    </p>

    <Transition name="plusButtonAnimation">
      <img v-show="plusButtonClicked"
           class=".plusButton
           sm:w-[var(--xTiny-1-3)]
           col-start-3
           col-end-4
           row-start-5
           row-end-6"
           id="plusButton"
           src="./assets/Plus.svg"
      />
    </Transition>

    <section class="
              textContainer
              col-start-3
              sm:col-end-11
              md:col-end-10
              lg:col-end-6
              row-start-2
              row-end-6"
              id="textContainer"
    >
  
      <Transition name="textFrameAnimation">
        <article
          v-show="plusButtonComplete"
          id="textFrame"
          class="textFrame
                sm:w-[var(--xTiny-1-3)]
                sm:h-[var(--xTiny-1-3)]
                bg-white z-70"
        >
        
          <article id="textContent">
            <p @click="toggleBack()" class="closeButton text-burgundy text-[length:var(--text-article-3)]">X</p>

            <article class="contentShell">
              <h2 class="contentTitle
                        text-burgundy
                         text-[length:var(--text-title-3)]"
              >
                Explore
              </h2>

              <p class="text-[length:var(--text-caption-1)]">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam vestibulum morbi blandit cursus risus at. Fringilla urna porttitor rhoncus dolor. Eu feugiat pretium nibh ipsum consequat nisl vel. Cras adipiscing enim eu turpis egestas pretium aenean. Id faucibus nisl tincidunt eget nullam non nisi. Mauris pellentesque pulvinar pellentesque habitant morbi tristique. Mi in nulla posuere sollicitudin. Ultrices tincidunt arcu non sodales neque. Purus in mollis nunc sed id semper risus in hendrerit.
              </p>

              <button class="
                            readMoreButton
                            my-5
                            text-[length:var(--text-widget-1)]
                            text-white
                            tracking-widest"
              >
                READ MORE

              </button>

            </article>

          </article>

        </article>
      </Transition>

      <Tansition name="goBackAnimation">
        <article
          v-show="closeTextFrameClicked"
          id="textFrameB"
          class="textFrame
                bg-white
                z-70"
        ></article>
      </Tansition>

    </section>
  </section>
</template>

<style scoped>

.page{
  display: grid;
  background-image: url('./assets/background.jpg');
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}
  
  .title{
    font-family: 'Prata', serif;
    pointer-events: none;
    align-self: left;
    width: min-content;
    text-align: left;
    place-self: center;
    position: relative;
    background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,1) 5%,
      rgba(255,255,255,1) 100%);
    background-size: 130%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .plusBtnContainer{
    display: grid;
    grid-area: 2/2/3/3;
    justify-self: left;
    align-self: start;
    column-gap: var(--micro-1-5);
    grid-template-columns: var(--xTiny-1-3) auto;
  }
  .buttonShell{
    grid-area: 1/1/2/2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .plusButton{
    /*grid-area: 1/1/2/2;*/
    grid-row: 1;
    grid-column: 1;
    /*justify-self: left;*/
    /*justify-self: flex-start;
    align-self: end;*/
  }

  .textContainer{
    pointer-events: none;

  }
  .textFrame{
    grid-area: 5/3/6/4;
    display: grid;
    position: relative;
    top: 50vh;
    border-radius: 50%;
    z-index: 100;
    /*justify-self: flex-start;*/
    /*position:absolute;*/
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
  }

  .textContent{
    display: grid;
    grid-auto-flow: column;
  }

  .closeButton{
    justify-self: right;
    text-align: right;
    margin-right: 1rem;
    cursor: pointer;
  }

  .contentTitle{
    font-family: 'Prata', serif;
  }

  .contentShell{
    width: 77%;
    margin: 0 auto;
  }
  .readMoreButton{
    display: block;
    padding: var(--micro-1-1) var(--xTiny-1-3);
    background-image: linear-gradient(90deg,
    rgba(97, 24, 24, 1),
    rgba(163, 103, 84, 1));
  }

  .details{
    text-align: left;
    margin-left: 3rem;
  }

  @keyframes plusButtonAnimationSequence{
    0% {transform: scale(1)}
    70% {transform: scale(0.4)}
    98% {transform: scale(1.1)}
    100% {transform: scale(1)}
  }
  .plusButtonAnimation-enter-active{
    animation: plusButtonAnimationSequence .3s ease-out;
  }

  @keyframes titleAnimationSequence{
    0% {
      background-position-x: 50%;
    }
    100% {
      background-position-x: -700%;
      opacity: 0;
      -webkit-animation-play-state: paused;
    }
  }
  .titleAnimation-enter-active{
    animation: titleAnimationSequence .5s ease-out forwards;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
  }

  @keyframes textFrameAnimationSequence{
    0% {
      border-radius: 50%;
    }
    100% {
      border-radius: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .textFrame-animation-leave-active{
    animation: goBackAnimationSequence .5s ease-out forwards;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
  }

  @keyframes textFrameAnimationLeaveSequence{
    0%{
      border-radius: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    100%{
      border-radius: 50%;
      top: 50vh;
      width: var(--xTiny-1-3);
      height: var(--xTiny-1-3);
    }
  }

  .textFrameAnimation-enter-active{
    animation: textFrameAnimationSequence .5s ease-out forwards;
  }



  @media(min-width: 500px){
    .plusBtnContainer{
      grid-area: 1/2/2/3;
      align-self: last baseline;
    }
  }

  @media(min-width: 1014px){
    .titleArea{
      grid-template-columns: var(--small-2-4) auto 1fr;
    }
  }
</style>

盒子開始了