The UiTransition component is a wrapper component built on Vue's Transition component, which tries to make transitioning between states even more seamless.
- Create dynamic transitions on the fly
- Save transition presets
- Supports all
<Transition>and<TransitionGroup>props - Supports group transition
- Renders no wrapper element
| 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 |
| 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
- 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>nameprop under the hood.
{
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'
}
} {
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.
// 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}}]
{
rotate: {
from: {
transform: 'rotate(90deg)',
opacity: '0'
},
duration: '300',
ease: 'eaee-in-out'
}
}
// usage: config='rotate' {
rotate: (rotate = '90deg', opacity = '0') => ({
from: {
transform: `rotate(${rotate})`,
opacity
},
duration: '300',
ease: 'eaee-in-out'
})
}
// usage: config="rotate('180deg', '0.5')" <TransitionGroup v-if='group'>
<slot />
</TransitionGroup>
<Transition v-else>
<slot />
</transition>| Name | Payload |
|---|---|
| default |
|
<div id='app'>
<UiTransition>
<div :key='dynamicKey'>
My key is {{dynamicKey}}
</div>
</UiTransition>
</div> <div id='app'>
<UiTransition config='rotate'>
<div :key='dynamicKey'>
My key is {{dynamicKey}}
</div>
</UiTransition>
</div> <div id='app'>
<UiTransition config='rotate(90deg)'>
<div :key='dynamicKey'>
My key is {{dynamicKey}}
</div>
</UiTransition>
</div> <div id='app'>
<UiTransition
:config="{
from: {
opacity: 0
},
duration: 200
}"
>
<div :key='dynamicKey'>
My key is {{dynamicKey}}
</div>
</UiTransition>
</div> <div id='app'>
<UiTransition
:config="['rotate', {
to:{
transform: 'rotate(10deg)',
}
}]"
>
<div :key='dynamicKey'>
My key is {{dynamicKey}}
</div>
</UiTransition>
</div> <div id='app'>
<UiTransition config='rotate(90deg)' mode='out-in'>
<div :key='dynamicKey'>
My key is {{dynamicKey}}
</div>
</UiTransition>
</div> <div id='app'>
<UiTransition config='rotate(90deg)' group>
<div v-for='(item, index) in loopData' :key='index'>
My key is {{index}}
</div>
</UiTransition>
</div> 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.