Built-in transition effect
Usage
transition
- Specify the built-in effect by name
- Configure the options that effect support
export interface Transition {
name?: string
uniforms?: Record<string, any>
}
Example
<template>
<AsTransition
:transition="{
name: 'windowslice',
uniforms: {
count: 10,
smoothness: 5
}
}"
...
</AsTransition>
</template>
default
Gradient transition effect
<template>
<AsTransition
:transition="{
name: 'default'
}"
>
...
</AsTransition>
</template>
windowslice
Louver effect
transition
name'windowslice'uniforms- count: number of slices
- smoothness: The bigger the transition, the slower it goes
<template>
<AsTransition
:transition="{
name: 'windowslice',
uniforms: {
count: 10,
smoothness: 5
}
}"
>
...
</AsTransition>
</template>
Example
Loading CodeSandbox...
directionalwrap
Big wave effect
transition
name'directionalwrap'uniforms- direction: Direction of wave { x: -1, y: 1 }
Example
Loading CodeSandbox...
more
TODO