Transition animation system changes

Transition Animation System Changes

Vue.js's transition animation system has undergone significant changes across multiple version iterations, evolving from basic CSS class name controls to more flexible JavaScript hook integrations. These modifications directly impact how developers handle element enter/leave animations, particularly in dynamic component and conditional rendering scenarios.

Changes in Class Name Mechanism

Early versions relied on fixed CSS class name structures, such as v-enter, v-leave-to, etc. Version 3.x introduced more semantic naming conventions:

/* Vue 2.x */
.v-enter-active { transition: opacity 0.5s; }

/* Vue 3.x */
.v-enter-from { opacity: 0; }
.v-enter-active { transition: opacity 0.5s; }

The new version splits initial states (-from) and end states (-to), enabling more precise multi-phase animation control. When a <transition> is given a name attribute, the prefix is automatically replaced:

<transition name="fade">
  <div v-if="show">Content</div>
</transition>

<style>
.fade-enter-from { transform: scale(0); }
.fade-enter-active { transition: transform 0.3s cubic-bezier(0.5, 1, 0.89, 1); }
</style>

Enhancements to JavaScript Hooks

Version 2.x primarily used events like @before-enter to handle animation logic, while 3.x introduced more granular callbacks like @enter for complex sequences:

// Vue 3 Example
function onEnter(el, done) {
  const tl = gsap.timeline({ onComplete: done })
  tl.from(el, { x: -100, duration: 0.5 })
    .to(el, { rotation: 360, duration: 1 })
}

Combined with the appear attribute, initial render animations can be handled:

<transition
  appear
  @before-appear="customBeforeAppear"
  @appear="customAppear"
>
  <div>Initial load animation</div>
</transition>

Improvements to List Transitions

In 3.x, <transition-group> no longer defaults to rendering a <span> wrapper element, instead using the tag attribute to specify the container:

<transition-group tag="ul" name="list">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

<style>
.list-move { transition: transform 0.8s ease; }
</style>

The new move-class allows overriding move transition class names, enabling smooth reordering effects with FLIP animation techniques.

Composition API Integration

Using useTransition in setup enables programmatic control over animation states:

import { useTransition } from 'vue'

export default {
  setup() {
    const { transitionState, startTransition } = useTransition({
      duration: 1000,
      onFinished: () => console.log('Animation ended')
    })

    function trigger() {
      startTransition({
        from: { opacity: 0 },
        to: { opacity: 1 }
      })
    }

    return { transitionState, trigger }
  }
}

Performance Optimization Strategies

Version 3.x introduces animation caching, reusing transition effects for elements toggled with v-show. The mode property controls timing:

<transition mode="out-in">
  <component :is="currentView"></component>
</transition>

Explicitly declaring animation duration with duration avoids dynamic detection overhead:

<transition :duration="{ enter: 500, leave: 800 }">
  <div v-if="show">Content</div>
</transition>

Collaboration with Third-Party Libraries

Example of complex animation choreography with GSAP:

import { onMounted } from 'vue'
import gsap from 'gsap'

export default {
  setup() {
    onMounted(() => {
      gsap.from('.box', {
        stagger: 0.1,
        y: 50,
        duration: 0.5
      })
    })
  }
}

Custom Transition Directives

Creating reusable animation directives:

app.directive('bounce', {
  mounted(el) {
    el.style.transition = 'transform 0.5s'
    el.addEventListener('mouseenter', () => {
      el.style.transform = 'scale(1.1)'
    })
  }
})

Reactive Animation Parameters

Dynamically adjusting animation properties based on data:

<transition :name="animationType">
  <div v-show="isVisible">Dynamic animation</div>
</transition>

<script>
export default {
  data() {
    return {
      animationType: 'fade',
      isVisible: false
    }
  },
  watch: {
    windowWidth(newVal) {
      this.animationType = newVal > 768 ? 'slide' : 'fade'
    }
  }
}
</script>

Advanced Usage of Transition Modes

Beyond mode="in-out" and mode="out-in", synchronous transitions can be achieved with absolute positioning:

.transition-container {
  position: relative;
}
.transition-item {
  position: absolute;
  top: 0;
  left: 0;
}

Animation Lifecycle Changes

In 2.x, @after-enter was renamed to @afterEnter in 3.x (camelCase) to align with other events:

<transition
  @afterEnter="handleAfterEnter"
  @enterCancelled="handleCancel"
>
  <!-- Content -->
</transition>