VConfigTransition

VConfigTransition is a wrapper component for Vue's built-in Transition component. Its purpose is to dynamically inject transition configurations from a preset configuration. This allows you to easily define and apply different transition styles for various components in your application, in line with Vunix's powerful theming system. By utilizing preset configurations, you can quickly customize the provided transition components, such as FadeTransition, CollapseTransition, and others, to better suit your application's visual and interactive requirements. This streamlined approach ensures a consistent and flexible user experience across your application.

Usage

The ConfigTransition component is used within other transition components, like FadeTransition, to apply the desired transition effect based on the preset configuration. Here's an example of how ConfigTransition is used in the FadeTransition.vue template:

<template>
  <ConfigTransition :config="presetConfig" v-bind="newProps">
    <slot />
  </ConfigTransition>
</template>

In this example, the FadeTransition component wraps its content (provided by the ) with the ConfigTransition component. The presetConfig prop contains the transition configuration specific to the fade effect, which is read from the Vunix theming system.

Props

ConfigTransitionConfig

The ConfigTransitionConfig interface is designed to enhance the customization capabilities of Vunix's theming system by enabling transition components, such as FadeTransition and CollapseTransition, to define their specific transition configurations using preset files. These files can include not only CSS classes but also custom JavaScript functions to handle different stages of the transition.

export interface ConfigTransitionConfig {
  enter?: {
    fixed: string, // enter-active-class vue class
    from: string, // enter-from-class vue class
    to: string // enter-to-class vue class
  },
  leave?: {
    fixed: string, // leave-active-class vue class
    from: string, // leave-from-class vue class
    to: string // leave-to-class vue class
  },
  onBeforeEnter?: TransitionProps['onBeforeEnter'],
  onEnter?: TransitionProps['onEnter'],
  onAfterEnter?: TransitionProps['onAfterEnter'],
  onEnterCancelled?: TransitionProps['onEnterCancelled'],
  onBeforeLeave?: TransitionProps['onBeforeLeave'],
  onLeave?: TransitionProps['onLeave'],
  onAfterLeave?: TransitionProps['onAfterLeave'],
  onLeaveCancelled?: TransitionProps['onLeaveCancelled']
}

const config = {
  enter: {
    fixed: 'overflow-hidden transition-[height] duration-300 ease-in',
    from: 'h-0',
  },
  leave: {
    fixed: 'overflow-hidden transition-[height] duration-300 ease-out',
    to: 'h-0'
  },
  onEnter: (el: HTMLElement, done) => {
    el.style.height = '0';
    el.offsetHeight; // Trigger a reflow, flushing the CSS changes
    el.style.height = el.scrollHeight + 'px';
    el.addEventListener('transitionend', done, { once: true });
  },
  onBeforeLeave(el: HTMLElement) {
    el.style.height = el.scrollHeight + 'px';
    el.offsetHeight; // Trigger a reflow, flushing the CSS changes
  },
  onAfterEnter(el: HTMLElement) {
    el.style.height = 'auto';
  },
  onLeave(el: HTMLElement, done) {
    el.style.height = "0";
    (el as HTMLElement).addEventListener('transitionend', done, { once: true });
  },
} as ConfigTransitionConfig;

In the CollapseTransition.config.ts example, the configuration includes enter and leave objects that specify the transition classes for the collapsing and expanding effects, respectively. In addition, it includes onEnter, onBeforeLeave, onAfterEnter, and onLeave methods to handle custom behavior during the transition process, such as setting the height of the element, triggering a reflow, and managing event listeners. This approach enables developers to easily tailor the transition components to their unique requirements, demonstrating the flexibility of the Vunix theming system.