TransitionMixed

TransitionMixed uses independently configured presets for enter and leave. Both descriptors are required.

MTransitionMixedClick this area to replay the transition.

Enter presetfadeexpandslidescaleLeave presetfadeexpandslidescale Keep opacity unchanged

Simplified code

<transition-mixed
	:enter="{ preset: 'scale' }"
	:leave="{ preset: 'slide' }"
>
	<div v-if="isVisible">Content</div>
</transition-mixed>

<transition-mixed
  :enter="{
    preset: 'scale',
    scale: 0.8,
    origin: '50% 50%',
  }"
  :leave="{
    preset: 'slide',
    offset: [0, '100%'],
  }"
>
  <div v-if="isVisible">Content</div>
</transition-mixed>

Preset descriptors

type TransitionPreset =
  | { preset: 'fade' }
  | { preset: 'expand'; axis?: 'x' | 'y' }
  | {
    preset: 'scale';
    axis?: 'x' | 'y' | 'both';
    origin?: string;
    scale?: number;
  }
  | {
    preset: 'slide';
    offset?: [number | string, number | string];
  };

Preset options inside a descriptor are single-phase values. Configure phase-specific timing with the common duration, delay, and easing props:

<transition-mixed
  :enter="{ preset: 'fade' }"
  :leave="{ preset: 'expand', axis: 'y' }"
  :duration="{ enter: 180, leave: 320 }"
>
  <div v-if="isVisible">Content</div>
</transition-mixed>

The enter preset is also used for an initial appear transition.