UiTransition

The UiTransition component is a wrapper component built on Vue's Transition component, which tries to make transitioning between states even more seamless.

Features ✨

• Create dynamic transitions on the fly
• Save transition presets
• Supports all <Transition> and <TransitionGroup> props
• Supports group transition
• Renders no wrapper element

Props ⚙

Name	Type	Default	Description
config	[String, Object, Array, Boolean]	'fade'	This is where you configure the current transition. The values here could be dynamic or static. All data types accepted, except for Array resolves into an Object. Arrays resolves into an array of objects. String: Use a preset that matches the name. Strings could take in arguments, or stay plane. Eg 'fade', 'fade(0, 1)', 'fade({from: 0, to: 1})'. NB: when passing arguments to a string value, the referenced saved preset Must be a Function. Also, when passing arguments to a string value, use quotes for string values. Eg fade(var(--from), 1) will throw an error, while fade('var(--from)', 1) wont. Object: When an object is passed, the valid values in the object will be used. Check below for a valid <UiTransition> object value. Array: Using an array value is mostly useful to override a saved preset. Eg ['fade', {duration: 400}]. The item(s) with higher array index overrides those with lower indexes. Boolean: Boolean values are mostly used to disable the transition config, or use the default value of 'fade', if the Boolean value is true
Group	Boolean	undefined	Using this prop will cause the <UiTransition> component to render a <TransitionGroup> component, and key any element without a key.
Optimise	Boolean	true	This prop adds the CSS will-change property a frame before transition starts, and removes the property a frame after transition ends.
previousTransform	String	undefined	Use this prop to set a previous transform state to be preserved while transitioning, to avoid the ugly transform jumps

Events ⏲

name	payload	description
state-change	String	This event emits whenever any Vue's <Transition> hook is called, with a payload of the active transition state. Eg 'beforeEnter', 'enter', etc.

The <UiTransition> component emits all Vue's transition hooks

Caveats ℹ

• The <UiTransition> component is not available as a standalone component for now.
• FendUI tries to give a butter smooth transition, this means we can only work with the 'friendly' transition properties opacity & transform
• FendUI will not check for a valid CSS value, so using a wrong value might break your transition.
• The <UiTransition> config prop makes use of Vue's <Transition> name prop under the hood.

Config anatomy 🧬

Robust (with full enter and leave configurations)

  {
    enter: {
      from: {
        transform: 'scale3d(0, 0, 1)',
        opacity: '0'
      },
      to: {
        transform: 'scale3d(1, 1, 1)',
        opacity: '1'
      },
      duration: '400ms',
      delay: '100',
      ease: 'ease',
      origin: 'center'
    },
    leave: {
      from: {
        transform: 'scale3d(1, 1, 1)',
        opacity: '1'
      },
      to: {
        transform: 'scale3d(0, 0, 1)',
        opacity: '0'
      },
      duration: '300ms',
      delay: '0',
      ease: 'ease-in-out',
      origin: 'top right'
    }    
  }

Simple (with a root configuration, and enter, and leave)

  {
    enter: {
      from: {
        transform: 'scale3d(0, 0, 1)',
        opacity: '0'
      },
      to: {
        transform: 'scale3d(1, 1, 1)',
        opacity: '1'
      },
    },
    leave: {
      from: {
        transform: 'scale3d(1, 1, 1)',
        opacity: '1'
      },
      to: {
        transform: 'scale3d(0, 0, 1)',
        opacity: '0'
      },
    },
    duration: '400ms',
    delay: '100',
    ease: 'ease',
    origin: 'center'
  }

Since most cases of transitions will be that the leave state is a reverse of the enter state, the <UiTransition> config object can be further simplified to a flat Object.

Simplest form

  // fade
  {
    from: {
      opacity: 0
    }, 
    duration: '400ms',
  }

NB: Basically, the <UiTransition> config object must have at least a from, and a duration property, unless you wish to override the preset, by using an Array config. Eg ['fade', {duration: 400, to: {opacity: 0.5}}]

Valid config ✅

A simple valid 'static' preset

  {
    rotate: {
      from: {
        transform: 'rotate(90deg)',
        opacity: '0'
      },
      duration: '300',
      ease: 'eaee-in-out'
    }
  }
  
  // usage: config='rotate'

A simple valid 'dynamic' preset

  {
    rotate: (rotate = '90deg', opacity = '0') => ({
      from: {
        transform: `rotate(${rotate})`,
        opacity
      },
      duration: '300',
      ease: 'eaee-in-out'
    })
  }
  
  // usage: config="rotate('180deg', '0.5')"

Structure 🏗

  <TransitionGroup v-if='group'>
    <slot />
  </TransitionGroup>
  
  <Transition v-else>
    <slot />
  </transition>

Slots 🎰

Name	Payload
default	{ state: 'beforeEnter' | 'enter' | 'enterCancelled' | 'afterEnter' | first four for 'leave' | first four for 'appear', phase: 'enter' | 'leave' }

Examples 💁‍♀️

Simplest form

  <div id='app'>
    <UiTransition>
      <div :key='dynamicKey'>
        My key is {{dynamicKey}}
      </div>
    </UiTransition>
  </div>      

With a static config of type String

  <div id='app'>
    <UiTransition config='rotate'>
      <div :key='dynamicKey'>
        My key is {{dynamicKey}}
      </div>
    </UiTransition>
  </div>      

With a dynamic config of type String

  <div id='app'>
    <UiTransition config='rotate(90deg)'>
      <div :key='dynamicKey'>
        My key is {{dynamicKey}}
      </div>
    </UiTransition>
  </div>      

With a static config of type Object

  <div id='app'>
    <UiTransition 
      :config="{
        from: {
          opacity: 0
        },
        duration: 200
      }"
    >
      <div :key='dynamicKey'>
        My key is {{dynamicKey}}
      </div>
    </UiTransition>
  </div>      

Overriding a config with type Array

  <div id='app'>
    <UiTransition 
      :config="['rotate', {
        to:{
          transform: 'rotate(10deg)',
        }
      }]"
    >
      <div :key='dynamicKey'>
        My key is {{dynamicKey}}
      </div>
    </UiTransition>
  </div>      

Using Vue props

  <div id='app'>
    <UiTransition config='rotate(90deg)' mode='out-in'>
      <div :key='dynamicKey'>
        My key is {{dynamicKey}}
      </div>
    </UiTransition>
  </div>      

As a <TransitionGroup>

  <div id='app'>
    <UiTransition config='rotate(90deg)' group>
      <div v-for='(item, index) in loopData' :key='index'>
        My key is {{index}}
      </div>
    </UiTransition>
  </div>      

Miscellaneous 🧰

The <UiTransition> component is widely used as a wrapper component throughout FendUI. When used as a wrapper component, you can always have access to its config prop, or any <Transition> prop, or hook.