mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-03-08 07:31:09 +08:00
feat(workflow): 为流程预览添加淡入动画效果
使用 motion-v 库为 iframe 容器添加淡入动画,提升用户体验
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user