xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 5.57 kB
Source Map (JSON)
{"version":3,"file":"animate.mjs","sources":["../../src/notification/animate.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\nconst fadeIn = (dom: HTMLElement, placement: string) => {\n if (!dom) return;\n const offsetHeight = dom?.offsetHeight || 0;\n const offsetWidth = dom?.offsetWidth || 0;\n const keyframes: Array<Keyframe> | null = getFadeInKeyframes(placement, offsetWidth, offsetHeight);\n if (!keyframes) return;\n dom.animate && dom.animate(keyframes, ANIMATION_OPTION);\n};\n\nconst fadeOut = (dom: HTMLElement, placement: string, onFinish: Function) => {\n if (!dom) return;\n const offsetHeight = dom?.offsetHeight || 0;\n const offsetWidth = dom?.offsetWidth || 0;\n const keyframes: Array<Keyframe> | null = getFadeOutKeyframes(placement, offsetWidth, offsetHeight);\n if (!keyframes) return onFinish();\n\n const animate = dom.animate && dom.animate(keyframes, ANIMATION_OPTION);\n if (animate) {\n animate.onfinish = () => {\n onFinish();\n };\n } else {\n dom.style.display = 'none';\n onFinish();\n }\n};\n\nconst getFadeInKeyframes = (placement: string, offsetWidth: Number, offsetHeight: Number): Array<Keyframe> | null => {\n if (!PLACEMENT_LIST.includes(placement)) return null;\n if (placement === 'top-right') {\n return [\n { opacity: 0, transform: `translateX(${offsetWidth}px)` },\n { opacity: 1, transform: `translateX(0px)` },\n ];\n }\n if (placement === 'bottom-right') {\n return [\n { opacity: 0, transform: `translateX(${offsetWidth}px)`, marginBottom: `-${offsetHeight}px` },\n { opacity: 1, transform: `translateX(0px)` },\n ];\n }\n if (placement === 'top-left') {\n return [\n { opacity: 0, transform: `translateX(-${offsetWidth}px)` },\n { opacity: 1, transform: `translateX(0px)` },\n ];\n }\n if (placement === 'bottom-left') {\n return [\n { opacity: 0, transform: `translateX(-${offsetWidth}px)`, marginBottom: `-${offsetHeight}px` },\n { opacity: 1, transform: `translateX(0px)` },\n ];\n }\n};\n\nconst getFadeOutKeyframes = (placement: string, offsetWidth: Number, offsetHeight: Number): Array<Keyframe> | null => {\n if (!PLACEMENT_LIST.includes(placement)) return null;\n if (placement === 'top-right') {\n return [\n { opacity: 1, transform: `translateX(0px)` },\n { opacity: 0, transform: `translateX(${offsetWidth}px)`, marginBottom: `-${offsetHeight}px` },\n ];\n }\n if (placement === 'bottom-right') {\n return [\n { opacity: 1, transform: `translateX(0px)` },\n { opacity: 0, transform: `translateX(${offsetWidth}px)` },\n ];\n }\n if (placement === 'top-left') {\n return [\n { opacity: 1, transform: `translateX(0px)` },\n { opacity: 0, transform: `translateX(-${offsetWidth}px)`, marginBottom: `-${offsetHeight}px` },\n ];\n }\n if (placement === 'bottom-left') {\n return [\n { opacity: 1, transform: `translateX(0px)` },\n { opacity: 0, transform: `translateX(-${offsetWidth}px)` },\n ];\n }\n};\n\nexport { fadeIn, fadeOut };\n"],"names":["duration","easing","onFinish","dom","opacity","transform"],"mappings":";;;;;;;;AAUA,IAAA,gBAAA,GAAA;AACEA,EAAAA,QAAAA,EAAAA,GAAAA;AACAC,EAAAA,MAAAA,EAAAA,QAAAA;AACF,CAAA,CAAA;AAEA,IAAA,MAAA,GAAA,SAAA,MAAA,CAAA,GAAA,EAAA,SAAA,EAAA;;;;;;;AAOA,EAAA;AAEA,IAAA,OAAA,GAAA,SAAA,OAAA,CAAA,GAAA,EAAA,SAAA,EAAA,QAAA,EAAA;;;;;AAKE,EAAA,IAAA,CAAA,SAAA,EAAA,OAAA,QAAA,EAAA,CAAA;AAEA,EAAA,IAAA,OAAA,GAAA,GAAA,CAAA,OAAA,IAAA,GAAA,CAAA,OAAA,CAAA,SAAA,EAAA,gBAAA,CAAA,CAAA;AACA,EAAA,IAAA,OAAA,EAAA;;AAEaC,MAAAA,QAAAA,EAAAA,CAAAA;;AAEb,GAAA,MAAA;AACEC,IAAAA,GAAAA,CAAAA,KAAAA,CAAAA,OAAAA,GAAAA,MAAAA,CAAAA;AACSD,IAAAA,QAAAA,EAAAA,CAAAA;AACX,GAAA;AACF,EAAA;AAEA,IAAA,kBAAA,GAAA,SAAA,kBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA;;;AAGW,IAAA,OAAA,CAAA;AACHE,MAAAA,OAAAA,EAAAA,CAAAA;;AAAsD,KAAA,EAAA;AACtDA,MAAAA,OAAAA,EAAAA,CAAAA;;AAAyC,KAAA,CAAA,CAAA;AAE/C,GAAA;;AAES,IAAA,OAAA,CAAA;AACHA,MAAAA,OAAAA,EAAAA,CAAAA;AAAYC,MAAAA,SAAAA,EAAAA,aAAAA,CAAAA,MAAAA,CAAAA,WAAAA,EAAAA,KAAAA,CAAAA;;AAA8E,KAAA,EAAA;AAC1FD,MAAAA,OAAAA,EAAAA,CAAAA;;AAAyC,KAAA,CAAA,CAAA;AAE/C,GAAA;;AAES,IAAA,OAAA,CAAA;AACHA,MAAAA,OAAAA,EAAAA,CAAAA;;AAAuD,KAAA,EAAA;AACvDA,MAAAA,OAAAA,EAAAA,CAAAA;;AAAyC,KAAA,CAAA,CAAA;AAE/C,GAAA;;AAES,IAAA,OAAA,CAAA;AACHA,MAAAA,OAAAA,EAAAA,CAAAA;AAAYC,MAAAA,SAAAA,EAAAA,cAAAA,CAAAA,MAAAA,CAAAA,WAAAA,EAAAA,KAAAA,CAAAA;;AAA+E,KAAA,EAAA;AAC3FD,MAAAA,OAAAA,EAAAA,CAAAA;;AAAyC,KAAA,CAAA,CAAA;AAE/C,GAAA;AACF,CAAA,CAAA;AAEA,IAAA,mBAAA,GAAA,SAAA,mBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA;;;AAGW,IAAA,OAAA,CAAA;AACHA,MAAAA,OAAAA,EAAAA,CAAAA;;AAAyC,KAAA,EAAA;AACzCA,MAAAA,OAAAA,EAAAA,CAAAA;AAAYC,MAAAA,SAAAA,EAAAA,aAAAA,CAAAA,MAAAA,CAAAA,WAAAA,EAAAA,KAAAA,CAAAA;;AAA8E,KAAA,CAAA,CAAA;AAEhG,GAAA;;AAES,IAAA,OAAA,CAAA;AACHD,MAAAA,OAAAA,EAAAA,CAAAA;;AAAyC,KAAA,EAAA;AACzCA,MAAAA,OAAAA,EAAAA,CAAAA;;AAAsD,KAAA,CAAA,CAAA;AAE5D,GAAA;;AAES,IAAA,OAAA,CAAA;AACHA,MAAAA,OAAAA,EAAAA,CAAAA;;AAAyC,KAAA,EAAA;AACzCA,MAAAA,OAAAA,EAAAA,CAAAA;AAAYC,MAAAA,SAAAA,EAAAA,cAAAA,CAAAA,MAAAA,CAAAA,WAAAA,EAAAA,KAAAA,CAAAA;;AAA+E,KAAA,CAAA,CAAA;AAEjG,GAAA;;AAES,IAAA,OAAA,CAAA;AACHD,MAAAA,OAAAA,EAAAA,CAAAA;;AAAyC,KAAA,EAAA;AACzCA,MAAAA,OAAAA,EAAAA,CAAAA;;AAAuD,KAAA,CAAA,CAAA;AAE7D,GAAA;AACF,CAAA;;;;"}