How to change property value only when transition completed?

[AlexRadch]

I have Lottie's animation with the transition. And I want to pause this animation only when the transition is completed.

    <Transition>
      <Lottie ref="SnowFlakes" :animationData="SnowFlakes_Json" style="position: absolute;
          width: 125%; left: 0%; top: 0%; "
        v-show="BellOfHappiness_playState"
        :pauseAnimation="!BellOfHappiness_playState" // pauses the animation immediately, I want to pause it only after the transition completed
      />
    </Transition>

:pauseAnimation="!BellOfHappiness_playState" pauses the animation immediately, I want to write something like next :pauseAnimation="!BellOfHappiness_playState && TRANSITION_IS_COMPLETED"

Now I do not pause hidden animation at all, but it consumes processor resources when animation is hidden.
I do not want to use v-if because it is slower than v-show and it can consume processor resources also.

How I can implement the TRANSITION_IS_COMPLETED predicate?

[chenxch]

Transition Hooks

<Transition @after-enter="handleAfterEnter">
      <Lottie ref="SnowFlakes" :animationData="SnowFlakes_Json" style="position: absolute;
          width: 125%; left: 0%; top: 0%; "
      />
    </Transition>

<script setup>
import { ref } from 'vue'
const SnowFlakes= ref(null)
function handleAfterEnter() {
   SnowFlakes.value?.pause()
}
</script>