Reactivity Fundamentals

Vue.js uses built-in component in response to changing state (effect):

Transition classes:

v-enter-from:

• Initial state for entering elements, added before insertion, and removed shortly after.

v-enter-active:

• Active state during entering, added before insertion, and removed when the transition finishes. Use it to set duration, delay, and easing.

v-enter-to:

• Ending state for entering, added one frame after insertion, and removed when the transition finishes.

v-leave-from:

• Starting state for leaving, added immediately when leaving starts, and removed after one frame.

v-leave-active:

• Active state during leaving, added immediately when leaving starts, and removed when the transition finishes. Use it to set duration, delay, and easing.

v-leave-to:

• Ending state for leaving, added one frame after leaving starts, and removed when the transition finishes.

Basic implementation

<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>

//animations
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

the v is bind to the v in v-if

JavaScript Hooks

• we can hook the transition process with JavaScript by listening to event in component:

<Transition
    @before-enter="onBeforeEnter"
></Transition>

<script>
    function onBeforeEnter(el) {}
</script>

Official documentation website

https://vuejs.org/guide/built-ins/transition.html