内置过渡效果
使用
transition 属性
- 通过
name指定内置效果 - 通过
uniforms配置效果支持的选项
export interface Transition {
name?: string
uniforms?: Record<string, any>
}
示例
<template>
<AsTransition
:transition="{
name: 'windowslice',
uniforms: {
count: 10,
smoothness: 5
}
}"
...
</AsTransition>
</template>
default
渐变过渡效果
<template>
<AsTransition
:transition="{
name: 'default'
}"
>
...
</AsTransition>
</template>
windowslice
百叶窗效果
transition 参数
name'windowslice'uniforms- count: 叶片个数
- smoothness: 越大过渡越慢
<template>
<AsTransition
:transition="{
name: 'windowslice',
uniforms: {
count: 10,
smoothness: 5
}
}"
>
...
</AsTransition>
</template>
示例
Loading CodeSandbox...
directionalwrap
波动效果
transition 参数
name'directionalwrap'uniforms- direction: 过渡方向 { x: -1, y: 1 }
示例
Loading CodeSandbox...
more
TODO