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

使用 motion-v 库为 iframe 容器添加淡入动画,提升用户体验
This commit is contained in:
dap
2026-01-30 16:40:41 +08:00
parent 0049c76f78
commit 8e2901775e

View File

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