Documentation / @ripl/vue / RiplTransition

Variable: RiplTransition

const RiplTransition: RiplComponent<RiplTransitionProps, unknown>

Defined in: adapters/vue/src/components/transition.ts:71

Animates the descendants it wraps as they enter, update and leave, mirroring Vue's own enter-from / leave-to model.

Each phase is either an options object or a factory called per element with its index and the scope's size, which is what makes staggering work. Requires a <ripl-renderer> ancestor: transitions are scheduled through the renderer's loop.

Example

<ripl-transition
    :enter="(el, i, n) => ({ duration: 400, delay: (i / n) * 200, state: { opacity: 0, radius: 0 } })"
    :update="{ duration: 250 }"
    :leave="{ duration: 200, state: { opacity: 0 } }"
>
    <ripl-circle v-for="item in items" :key="item.id" :cx="item.x" :cy="item.y" :radius="item.r"/>
</ripl-transition>