CODEWITHSUNDEEP
vue.jsanimationvuejs3vue-transitions
user13069641
user13069641

Reputation: 19

<Transition> and type attribute

Using Vue 3.3.4, same behavior on Chrome and Firefox:

My code should play 1 animation and 1 transition at the same time for each 'enter' and 'leave' class.

Without type="animation" in the <Transition> tag with the same durations, everything works fine. But when I specify type="animation" in the 'Transition' tag with a duration of 3 seconds for 'animation' and 1 second for 'transition', this is what happens:

Class 'enter': 'animation' 3s only.

Class 'leave': 'animation' & 'transition' 1s, while if I understood correctly, Vuejs should choose the longest duration.

So why 'animation' play only on the 'enter' class?

Why 1s chosen by Vuejs on the 'leave' class?

<template>
  <button type="button" @click="flag = !flag">Toggle</button>
  <transition name="zoom" type="animation">
    <h2 v-if="flag">Hello</h2>
  </transition>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      flag: false,
    };
  },
};
</script>

<style>
h2 {
  width: 400px;
  padding: 20px;
  margin: 20px;
  color: rgb(255, 255, 255);
}
.zoom-enter-active {
  animation: zoom-in 3s linear forwards;
  transition: all 1s linear;
}
.zoom-leave-active {
  animation: zoom-out 3s linear forwards;
  transition: all 1s linear;
}

.zoom-enter-from {
  opacity: 0;
}
.zoom-leave-to {
  opacity: 0;
}
@keyframes zoom-in {
  from {
    transform: scale(0, 0);
  }
  to {
    transform: scale(1, 1);
  }
}
@keyframes zoom-out {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(0, 0);
  }
}
</style>

Upvotes: -1

Views: 73

Answers (1)

Moritz Ringler
Moritz Ringler

Reputation: 16061

Here is what happens on enter:

  • element is put into DOM by v-if with v-enter-from class set
  • after a single frame, v-enter-from is replaced by v-enter-active and v-enter-to, transition and animation start playing
  • after one second, the transition is done, the content is fully visible
  • after another two seconds, the animation is finished, the content is scaled to full size
  • v-enter-active and v-enter-to are removed from the element

And on leave:

  • v-leave-from is put on the element for a single frame
  • v-leave-from is replaced by v-leave-active and v-leave-to, transition and animation start playing
  • after one second, the transition is done, the content is not visible anymore (but space is still occupied)
  • the animation keeps running for two more seconds, event though content is already hidden
  • v-enter-active and v-enter-to are removed from the element and the element is removed from DOM through v-if

So while the *-active and *-to classes are present on the element for the maximum duration of the transition and animation, the duration of the individual transition/animation is not changed.

A transition of 1s gives you a hard limit on how long a fade-out animation is visible.

Upvotes: 0

Related Questions