public/ruoyi-plus-vben5
1
0
Fork 0
mirror of https://gitee.com/dapppp/ruoyi-plus-vben5.git synced 2026-03-29 02:33:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(workflow): 为流程预览添加淡入动画效果

Browse Source 
使用 motion-v 库为 iframe 容器添加淡入动画，提升用户体验
This commit is contained in:
dap
2026-01-30 16:40:41 +08:00
parent 0049c76f78
commit 8e2901775e
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web-antd/src/views/workflow/components/flow-preview.vue
View File

@@ -5,6 +5,8 @@ import { useAppConfig } from '@vben/hooks';
import { stringify } from '@vben/request'; import { stringify } from '@vben/request';
import { useAccessStore } from '@vben/stores'; import { useAccessStore } from '@vben/stores';
import { motion } from 'motion-v';
import { useWarmflowIframe } from './hook'; import { useWarmflowIframe } from './hook';
defineOptions({ name: 'FlowPreview' }); defineOptions({ name: 'FlowPreview' });
@@ -38,9 +40,15 @@ const { iframeRef } = useWarmflowIframe();
</script> </script>
<template> <template>
<iframe <motion.div
ref="iframeRef" :initial="{ opacity: 0 }"
:src="url" :animate="{ opacity: 1 }"
class="h-[600px] w-full rounded-[6px] border" :transition="{ duration: 0.5 }"
></iframe> >
<iframe
ref="iframeRef"
:src="url"
class="h-[600px] w-full rounded-[6px] border"
></iframe>
</motion.div>
</template> </template>