安丘做网站,嘉祥县建设局官方网站,网站设计 ipad,域名备案注销流程基于HDialog的特殊动画效果实现
业务场景
在开发过程中直接使用HDialog所展现的效果很快#xff0c;同时不能够与用户所点击位置进行交互#xff0c;会造成用户的体验观感不够好。因此需要实现一种能够从用户点击按钮位置以可变动画效果所展现的Dialog效果。
工作原理及实…基于HDialog的特殊动画效果实现
业务场景
在开发过程中直接使用HDialog所展现的效果很快同时不能够与用户所点击位置进行交互会造成用户的体验观感不够好。因此需要实现一种能够从用户点击按钮位置以可变动画效果所展现的Dialog效果。
工作原理及实现思路 1 基本定位图1标识了实现特殊动画效果所需要的主要位置信息其中最大的蓝色框表示浏览器大小蓝色三角表示用户点击位置。由于需要从用户点击位置对动画进行触发因此考虑到使用transform-origin属性。随后需要通过计算得到用户点击位置相对于HDialog弹出框的位置即offsetTop-clickpos.y与offsetLeft-clickpos.x将transform-origin属性设置为此相对位置即可完成基本定位。 2 事件处理根据1的分析用户点击按钮以触发弹出框的过程中需要得到用户所点击的位置因此需要在当前document.documentElement上添加额外的点击事件以获取用户点击位置同时需要触发捕获使此点击事件在弹出框触发点击事件前执行。 3 添加动画通过控制台调试得知在HDialog弹出与隐藏的过程中其Dom元素会分别动态添加dialog-fade-enter-active类与dialog-fade-leave-active类通过在此动态类的子自定义组件类custom-class所设置上添加动画即可完成HDialog的特殊动画效果。
代码实现
script setup langts
import { nextTick, ref, watch } from vueconst visible ref(false)
const visible_or ref(false)
const mousePosition {x: 0,y: 0,
};
function handleMouseMove(e: MouseEvent) {mousePosition.x e.x;mousePosition.y e.y;
}
document.documentElement.addEventListener(click, handleMouseMove, true);
const modalRef refany();watch(() visible.value,async(value) {console.log(visible change, value);if (value) {await nextTick();const node: HTMLElement document.querySelector(.h-dialog.dialog-demo) as HTMLElement;const computedStyle window.getComputedStyle(node); let width;if (/px/g.test(computedStyle.width)) {// 如果宽度是像素类型// 正则替换像素成为数字格式width Number(computedStyle.width.replace(/px/g, ));} else {// 宽度为百分比类型// 正则替换百分比并转化为数字格式width document.documentElement.clientWidth * (Number(computedStyle.width.replace(/%/g, )) / 100);}const top computedStyle.marginTop.replace(/px/g, ); // 对话框距离顶部的距离// 计算变换偏移const transformLeft mousePosition.x - (document.documentElement.clientWidth - width) / 2; // 本质上为对话框左上角的 x 距离触发点 x 的距离const transformTop mousePosition.y - Number(top); // 本质上为对话框左上角的 y 距离触发点 y 的距离node.style.transformOrigin ${transformLeft}px ${transformTop}px;}}
)/scripttemplatediv classflex flex-col gap-2div修改版本/divdiv classflex testh-button clickvisible true基础用法/h-buttonh-dialog refmodalRef v-modelvisible title提示 custom-classdialog-demo你好啊这是一个弹框的基本功能template #footerh-button typeprimary clickvisible false确 定/h-buttonh-button clickvisible false取 消/h-button/template/h-dialog/div/divdiv classflex flex-col gap-2div原始版本/divdiv classflex testh-button clickvisible_or true基础用法/h-buttonh-dialog refmodalRef v-modelvisible_or title提示你好啊这是一个弹框的基本功能template #footerh-button typeprimary clickvisible_or false确 定/h-buttonh-button clickvisible_or false取 消/h-button/template/h-dialog/div/div
/templatestyle
.dialog-fade-enter-active .h-dialog.dialog-demo {animation: ani-open .3s ease;
}.dialog-fade-leave-active .h-dialog.dialog-demo {animation: ani-close .3s ease;
}
keyframes ani-open {0% {transform: scale(0);}100% {transition: scale(1);}
}keyframes ani-close {0% {transform: scale(1);}100% {transform: scale(0);}
}
/styleframes ani-close {0% {transform: scale(1);}100% {transform: scale(0);}
}
/style
