xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 6.29 kB
Source Map (JSON)
{"version":3,"file":"animation.mjs","sources":["../../src/message/animation.ts"],"sourcesContent":["import { PLACEMENT_LIST } from './const';\n\ninterface Keyframe {\n composite?: CompositeOperationOrAuto;\n easing?: string;\n offset?: number | null;\n [property: string]: string | number | null | undefined;\n}\ntype CompositeOperationOrAuto = 'accumulate' | 'add' | 'auto' | 'replace';\n\nconst ANIMATION_OPTION = {\n duration: 200,\n easing: 'linear',\n};\n\nfunction fadeIn(dom: HTMLElement, placement: string) {\n if (!dom) return;\n const offsetWidth = dom?.offsetWidth || 0;\n const offsetHeight = dom?.offsetHeight || 0;\n const fadeInKeyframes: Array<Keyframe> | null = getFadeInKeyframes(placement, offsetWidth, offsetHeight);\n if (!fadeInKeyframes) return;\n const styleAfterFadeIn = fadeInKeyframes[fadeInKeyframes.length - 1];\n setDomStyleAfterAnimation(dom, styleAfterFadeIn);\n dom.animate && dom.animate(fadeInKeyframes, ANIMATION_OPTION);\n}\n\nfunction fadeOut(dom: HTMLElement, placement: string, onFinish: Function) {\n if (!dom) return;\n const offsetHeight = dom?.offsetHeight || 0;\n const fadeOutKeyframes: Array<Keyframe> | null = getFadeOutKeyframes(placement, offsetHeight);\n if (!fadeOutKeyframes) return onFinish();\n const styleAfterFadeOut = fadeOutKeyframes[fadeOutKeyframes.length - 1];\n setDomStyleAfterAnimation(dom, styleAfterFadeOut);\n\n const animation = dom.animate && dom.animate(fadeOutKeyframes, ANIMATION_OPTION);\n if (animation) {\n animation.onfinish = () => {\n // eslint-disable-next-line no-param-reassign\n dom.style.display = 'none';\n onFinish();\n };\n } else {\n // eslint-disable-next-line no-param-reassign\n dom.style.display = 'none';\n onFinish();\n }\n}\n\nfunction setDomStyleAfterAnimation(dom: HTMLElement, styleAfterAnimation: Keyframe) {\n const keys = Object.keys(styleAfterAnimation);\n for (let i = 0; i < keys.length; i += 1) {\n const key = keys[i];\n // eslint-disable-next-line no-param-reassign\n dom.style[key] = styleAfterAnimation[key];\n }\n}\n\nfunction getFadeInKeyframes(placement: string, offsetWidth: Number, offsetHeight: Number): Array<Keyframe> | null {\n if (!PLACEMENT_LIST.includes(placement)) return null;\n if (['top-left', 'left', 'bottom-left'].includes(placement)) {\n return [\n { opacity: 0, marginLeft: `-${offsetWidth}px` },\n { opacity: 1, marginLeft: '0' },\n ];\n }\n if (['top-right', 'right', 'bottom-right'].includes(placement)) {\n return [\n { opacity: 0, marginRight: `-${offsetWidth}px` },\n { opacity: 1, marginRight: '0' },\n ];\n }\n if (['top', 'center'].includes(placement)) {\n return [\n { opacity: 0, marginTop: `-${offsetHeight}px` },\n { opacity: 1, marginTop: '0' },\n ];\n }\n if (['bottom'].includes(placement)) {\n return [\n { opacity: 0, transform: `translate3d(0, ${offsetHeight}px, 0)` },\n { opacity: 1, transform: 'translate3d(0, 0, 0)' },\n ];\n }\n}\n\nfunction getFadeOutKeyframes(placement: string, offsetHeight: Number): Array<Keyframe> | null {\n if (!PLACEMENT_LIST.includes(placement)) return null;\n if (['bottom-left', 'bottom', 'bottom-right'].includes(placement)) {\n const marginOffset = `${offsetHeight}px`;\n return [\n { opacity: 1, marginTop: '0px' },\n { opacity: 0, marginTop: marginOffset },\n ];\n }\n const marginOffset = `-${offsetHeight}px`;\n return [\n { opacity: 1, marginTop: '0px' },\n { opacity: 0, marginTop: marginOffset },\n ];\n}\n\nexport { fadeIn, fadeOut };\n"],"names":["duration","easing","setDomStyleAfterAnimation","dom","onFinish","opacity","marginLeft","marginRight","marginTop","transform"],"mappings":"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"}