Netfan
1 year ago
committed by
GitHub
GitHub
11 changed files with 338 additions and 0 deletions
@ -0,0 +1,8 @@ |
|||
export * from './types'; |
|||
|
|||
export { |
|||
MotionComponent as Motion, |
|||
MotionDirective, |
|||
MotionGroupComponent as MotionGroup, |
|||
MotionPlugin, |
|||
} from '@vueuse/motion'; |
|||
@ -0,0 +1,26 @@ |
|||
export const MotionPresets = [ |
|||
'fade', |
|||
'fadeVisible', |
|||
'fadeVisibleOnce', |
|||
'rollBottom', |
|||
'rollLeft', |
|||
'rollRight', |
|||
'rollTop', |
|||
'rollVisibleBottom', |
|||
'rollVisibleLeft', |
|||
'rollVisibleRight', |
|||
'rollVisibleTop', |
|||
'pop', |
|||
'popVisible', |
|||
'popVisibleOnce', |
|||
'slideBottom', |
|||
'slideLeft', |
|||
'slideRight', |
|||
'slideTop', |
|||
'slideVisibleBottom', |
|||
'slideVisibleLeft', |
|||
'slideVisibleRight', |
|||
'slideVisibleTop', |
|||
] as const; |
|||
|
|||
export type MotionPreset = (typeof MotionPresets)[number]; |
|||
@ -0,0 +1,213 @@ |
|||
<script lang="ts" setup> |
|||
import { reactive } from 'vue'; |
|||
|
|||
import { Page } from '@vben/common-ui'; |
|||
import { Motion, MotionGroup, MotionPresets } from '@vben/plugins/motion'; |
|||
|
|||
import { refAutoReset, watchDebounced } from '@vueuse/core'; |
|||
import { |
|||
Button, |
|||
Card, |
|||
Col, |
|||
Form, |
|||
FormItem, |
|||
InputNumber, |
|||
Row, |
|||
Select, |
|||
} from 'ant-design-vue'; |
|||
// 本例子用不到visible类型的动画。带有VisibleOnce和Visible的类型会在组件进入视口被显示时执行动画， |
|||
const presets = MotionPresets.filter((v) => !v.includes('Visible')); |
|||
const showCard1 = refAutoReset(true, 100); |
|||
const showCard2 = refAutoReset(true, 100); |
|||
const showCard3 = refAutoReset(true, 100); |
|||
const motionProps = reactive({ |
|||
delay: 0, |
|||
duration: 300, |
|||
enter: { scale: 1 }, |
|||
hovered: { scale: 1.1, transition: { delay: 0, duration: 50 } }, |
|||
preset: 'fade', |
|||
tapped: { scale: 0.9, transition: { delay: 0, duration: 50 } }, |
|||
}); |
|||
|
|||
const motionGroupProps = reactive({ |
|||
delay: 0, |
|||
duration: 300, |
|||
enter: { scale: 1 }, |
|||
hovered: { scale: 1.1, transition: { delay: 0, duration: 50 } }, |
|||
preset: 'fade', |
|||
tapped: { scale: 0.9, transition: { delay: 0, duration: 50 } }, |
|||
}); |
|||
|
|||
watchDebounced( |
|||
motionProps, |
|||
() => { |
|||
showCard2.value = false; |
|||
}, |
|||
{ debounce: 200, deep: true }, |
|||
); |
|||
|
|||
watchDebounced( |
|||
motionGroupProps, |
|||
() => { |
|||
showCard3.value = false; |
|||
}, |
|||
{ debounce: 200, deep: true }, |
|||
); |
|||
|
|||
function openDocPage() { |
|||
window.open('https://motion.vueuse.org/', '_blank'); |
|||
} |
|||
</script> |
|||
<template> |
|||
<Page title="Motion"> |
|||
<template #description> |
|||
<span>一个易于使用的为其它组件赋予动画效果的组件。</span> |
|||
<Button type="link" @click="openDocPage">查看文档</Button> |
|||
</template> |
|||
<Card title="使用指令" :body-style="{ minHeight: '5rem' }"> |
|||
<template #extra> |
|||
<Button type="primary" @click="showCard1 = false">重载</Button> |
|||
</template> |
|||
<div> |
|||
<div class="relative flex gap-2 overflow-hidden" v-if="showCard1"> |
|||
<Button v-motion-fade-visible>fade</Button> |
|||
<Button v-motion-pop-visible :duration="500">pop</Button> |
|||
<Button v-motion-slide-left>slide-left</Button> |
|||
<Button v-motion-slide-right>slide-right</Button> |
|||
<Button v-motion-slide-bottom>slide-bottom</Button> |
|||
<Button v-motion-slide-top>slide-top</Button> |
|||
</div> |
|||
</div> |
|||
</Card> |
|||
<Card |
|||
class="mt-2" |
|||
title="使用组件（将内部作为一个整体添加动画）" |
|||
:body-style="{ padding: 0 }" |
|||
> |
|||
<div |
|||
class="relative flex min-h-32 items-center justify-center gap-2 overflow-hidden" |
|||
> |
|||
<Motion |
|||
v-bind="motionProps" |
|||
v-if="showCard2" |
|||
class="flex items-center gap-2" |
|||
> |
|||
<Button size="large">这个按钮在显示时会有动画效果</Button> |
|||
<span>附属组件，会作为整体处理动画</span> |
|||
</Motion> |
|||
</div> |
|||
<div |
|||
class="relative flex min-h-32 items-center justify-center gap-2 overflow-hidden" |
|||
> |
|||
<div v-if="showCard2" class="flex items-center gap-2"> |
|||
<span>顺序延迟</span> |
|||
<Motion |
|||
v-bind="{ |
|||
...motionProps, |
|||
delay: motionProps.delay + 100 * i, |
|||
}" |
|||
v-for="i in 5" |
|||
:key="i" |
|||
> |
|||
<Button size="large">按钮{{ i }}</Button> |
|||
</Motion> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<Form :model="motionProps" :label-col="{ span: 10 }"> |
|||
<Row> |
|||
<Col :span="8"> |
|||
<FormItem prop="preset" label="动画效果"> |
|||
<Select v-model:value="motionProps.preset"> |
|||
<Select.Option |
|||
:value="preset" |
|||
v-for="preset in presets" |
|||
:key="preset" |
|||
> |
|||
{{ preset }} |
|||
</Select.Option> |
|||
</Select> |
|||
</FormItem> |
|||
</Col> |
|||
<Col :span="8"> |
|||
<FormItem prop="duration" label="持续时间"> |
|||
<InputNumber v-model:value="motionProps.duration" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col :span="8"> |
|||
<FormItem prop="delay" label="延迟动画"> |
|||
<InputNumber v-model:value="motionProps.delay" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col :span="8"> |
|||
<FormItem prop="hovered.scale" label="Hover缩放"> |
|||
<InputNumber v-model:value="motionProps.hovered.scale" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col :span="8"> |
|||
<FormItem prop="hovered.tapped" label="按下时缩放"> |
|||
<InputNumber v-model:value="motionProps.tapped.scale" /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
</div> |
|||
</Card> |
|||
<Card |
|||
class="mt-2" |
|||
title="分组动画（每个子元素都会应用相同的独立动画）" |
|||
:body-style="{ padding: 0 }" |
|||
> |
|||
<div |
|||
class="relative flex min-h-32 items-center justify-center gap-2 overflow-hidden" |
|||
> |
|||
<MotionGroup v-bind="motionGroupProps" v-if="showCard3"> |
|||
<Button size="large">按钮1</Button> |
|||
<Button size="large">按钮2</Button> |
|||
<Button size="large">按钮3</Button> |
|||
<Button size="large">按钮4</Button> |
|||
<Button size="large">按钮5</Button> |
|||
</MotionGroup> |
|||
</div> |
|||
<div> |
|||
<Form :model="motionGroupProps" :label-col="{ span: 10 }"> |
|||
<Row> |
|||
<Col :span="8"> |
|||
<FormItem prop="preset" label="动画效果"> |
|||
<Select v-model:value="motionGroupProps.preset"> |
|||
<Select.Option |
|||
:value="preset" |
|||
v-for="preset in presets" |
|||
:key="preset" |
|||
> |
|||
{{ preset }} |
|||
</Select.Option> |
|||
</Select> |
|||
</FormItem> |
|||
</Col> |
|||
<Col :span="8"> |
|||
<FormItem prop="duration" label="持续时间"> |
|||
<InputNumber v-model:value="motionGroupProps.duration" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col :span="8"> |
|||
<FormItem prop="delay" label="延迟动画"> |
|||
<InputNumber v-model:value="motionGroupProps.delay" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col :span="8"> |
|||
<FormItem prop="hovered.scale" label="Hover缩放"> |
|||
<InputNumber v-model:value="motionGroupProps.hovered.scale" /> |
|||
</FormItem> |
|||
</Col> |
|||
<Col :span="8"> |
|||
<FormItem prop="hovered.tapped" label="按下时缩放"> |
|||
<InputNumber v-model:value="motionGroupProps.tapped.scale" /> |
|||
</FormItem> |
|||
</Col> |
|||
</Row> |
|||
</Form> |
|||
</div> |
|||
</Card> |
|||
</Page> |
|||
</template> |
|||
Loading…
Reference in new issue