How to use fade-out animation with Vue Transition component?

[ZiuChen]

When the showLabel variable changes from false to true, the fade-in animation displays correctly. However, when showLabel changes to false, the element disappears immediately without applying the fade-out animation.

<span v-show="showLabel" class="animate-in fade-in">
  {{ scale.toFixed(1) }}x
</span>

If I want to use it with the Transition component, how should I specify the name prop for the Transition?

<Transition>
  <span v-show="showLabel" class="animate-in fade-in">
    {{ scale.toFixed(1) }}x
  </span>
</Transition>

[xsjcTony]

I haven't been using Vue's <Transition /> component a lot, but based on my knowledge, there are 2 ways to do so:

• Specify a transition name, and use @apply for those classnames in <style> block
• Use https://vuejs.org/guide/built-ins/transition.html#custom-transition-classes to give it a try. the mechanism should be similar to Animate.css in the example, so I'd suggest that way.