@whitesev/domutils 1.6.0 → 1.6.2

package/dist/types/src/DOMUtilsEvent.d.ts

@@ -262,6 +262,24 @@ export declare class DOMUtilsEvent {
      * })
      */
     hover(element: DOMUtilsTargetElementType, handler: (this: HTMLElement, event: DOMUtils_Event["hover"]) => void, option?: boolean | DOMUtilsEventListenerOption): void;
+    /**
+     * 当动画结束时触发事件
+     * @param element 监听的元素
+     * @param handler 触发的回调函数
+     * @param option 配置项，这里默认配置once为true
+     */
+    animationend(element: HTMLElement | string, handler: (this: HTMLElement, event: DOMUtils_Event["animationend"]) => void, option?: boolean | DOMUtilsEventListenerOption): {
+        off(): void;
+    } | undefined;
+    /**
+     * 当过渡结束时触发事件
+     * @param element 监听的元素
+     * @param handler 触发的回调函数
+     * @param option 配置项，这里默认配置once为true
+     */
+    transitionend(element: HTMLElement | string, handler: (this: HTMLElement, event: DOMUtils_Event["transitionend"]) => void, option?: boolean | DOMUtilsEventListenerOption): {
+        off(): void;
+    } | undefined;
     /**
      * 当按键松开时触发事件
      * keydown - > keypress - > keyup

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/domutils",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "type": "module",
   "description": "使用js重新对jQuery的部分函数进行了仿写",
   "main": "dist/index.cjs.js",

package/src/DOMUtils.ts

@@ -9,7 +9,7 @@ class DOMUtils extends DOMUtilsEvent {
 		super(option);
 	}
 	/** 版本号 */
-	version = "2025.8.9";
+	version = "2025.8.11";
 	/**
 	 * 获取元素的属性值
 	 * @param element 目标元素
@@ -20,7 +20,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * DOMUtils.attr("a.xx","href");
 	 * > https://xxxx....
 	 */
-	attr(element: DOMUtilsTargetElementType, attrName: string): string;
+	attr(element: DOMUtilsTargetElementType | Element, attrName: string): string;
 	/**
 	 * 设置元素的属性值
 	 * @param element 目标元素
@@ -31,8 +31,12 @@ class DOMUtils extends DOMUtilsEvent {
 	 * DOMUtils.attr(document.querySelector("a.xx"),"href","abcd");
 	 * DOMUtils.attr("a.xx","href","abcd");
 	 */
-	attr(element: DOMUtilsTargetElementType, attrName: string, attrValue: string | boolean | number): void;
-	attr(element: DOMUtilsTargetElementType, attrName: string, attrValue?: any) {
+	attr(
+		element: DOMUtilsTargetElementType | Element,
+		attrName: string,
+		attrValue: string | boolean | number
+	): void;
+	attr(element: DOMUtilsTargetElementType | Element, attrName: string, attrValue?: any) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
@@ -600,7 +604,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * DOMUtils.removeAttr(document.querySelector("a.xx"),"data-value")
 	 * DOMUtils.removeAttr("a.xx","data-value")
 	 * */
-	removeAttr(element: DOMUtilsTargetElementType, attrName: string) {
+	removeAttr(element: DOMUtilsTargetElementType | Element, attrName: string) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
@@ -626,7 +630,10 @@ class DOMUtils extends DOMUtilsEvent {
 	 * DOMUtils.removeClass(document.querySelector("a.xx"),"xx")
 	 * DOMUtils.removeClass("a.xx","xx")
 	 */
-	removeClass(element: DOMUtilsTargetElementType, className?: string | string[] | undefined | null) {
+	removeClass(
+		element: DOMUtilsTargetElementType | Element,
+		className?: string | string[] | undefined | null
+	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
@@ -717,7 +724,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * DOMUtils.addClass(document.querySelector("a.xx"),"_vue_")
 	 * DOMUtils.addClass("a.xx","_vue_")
 	 * */
-	addClass(element: DOMUtilsTargetElementType, className: string | string[]) {
+	addClass(element: DOMUtilsTargetElementType | Element, className: string | string[]) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
@@ -747,7 +754,7 @@ class DOMUtils extends DOMUtilsEvent {
 	 * @param element
 	 * @param className
 	 */
-	hasClass(element: DOMUtilsTargetElementType, className: string | string[]): boolean {
+	hasClass(element: DOMUtilsTargetElementType | Element, className: string | string[]): boolean {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
 			element = DOMUtilsContext.selectorAll(element);
@@ -1967,6 +1974,14 @@ class DOMUtils extends DOMUtilsEvent {
 			return isNumber ? parseFloat(val) : val;
 		}
 	}
+	/** 获取 animationend 在各个浏览器的兼容名 */
+	getAnimationEndNameList() {
+		return DOMUtilsCommonUtils.getAnimationEndNameList();
+	}
+	/** 获取 transitionend 在各个浏览器的兼容名 */
+	getTransitionEndNameList() {
+		return DOMUtilsCommonUtils.getTransitionEndNameList();
+	}
 }
 
 let domUtils = new DOMUtils();

package/src/DOMUtilsCommonUtils.ts

@@ -188,5 +188,13 @@ const DOMUtilsCommonUtils = {
 	isNodeList($ele: any): $ele is any[] | NodeList {
 		return Array.isArray($ele) || $ele instanceof NodeList;
 	},
+	/** 获取 animationend 在各个浏览器的兼容名 */
+	getAnimationEndNameList() {
+		return ["webkitAnimationEnd", "mozAnimationEnd", "MSAnimationEnd", "oanimationend", "animationend"];
+	},
+	/** 获取 transitionend 在各个浏览器的兼容名 */
+	getTransitionEndNameList() {
+		return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
+	},
 };
 export { DOMUtilsCommonUtils };

package/src/DOMUtilsEvent.ts

@@ -882,7 +882,7 @@ export class DOMUtilsEvent {
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.selectorAll(element);
+			element = DOMUtilsContext.selectorAll<HTMLElement>(element);
 		}
 		if (element == null) {
 			return;
@@ -922,7 +922,7 @@ export class DOMUtilsEvent {
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.selectorAll(element);
+			element = DOMUtilsContext.selectorAll<HTMLElement>(element);
 		}
 		if (element == null) {
 			return;
@@ -961,7 +961,7 @@ export class DOMUtilsEvent {
 	) {
 		let DOMUtilsContext = this;
 		if (typeof element === "string") {
-			element = DOMUtilsContext.selectorAll(element);
+			element = DOMUtilsContext.selectorAll<HTMLElement>(element);
 		}
 		if (element == null) {
 			return;
@@ -976,6 +976,84 @@ export class DOMUtilsEvent {
 		DOMUtilsContext.on(element, "mouseenter", null, handler, option);
 		DOMUtilsContext.on(element, "mouseleave", null, handler, option);
 	}
+	/**
+	 * 当动画结束时触发事件
+	 * @param element 监听的元素
+	 * @param handler 触发的回调函数
+	 * @param option 配置项，这里默认配置once为true
+	 */
+	animationend(
+		element: HTMLElement | string,
+		handler: (this: HTMLElement, event: DOMUtils_Event["animationend"]) => void,
+		option?: boolean | DOMUtilsEventListenerOption
+	) {
+		let DOMUtilsContext = this;
+		if (typeof element === "string") {
+			element = DOMUtilsContext.selector<HTMLElement>(element)!;
+		}
+		if (element == null) {
+			return;
+		}
+		// if (DOMUtilsCommonUtils.isNodeList(element)) {
+		// 	// 设置
+		// 	element.forEach(($ele) => {
+		// 		DOMUtilsContext.animationend($ele as HTMLElement, handler, option);
+		// 	});
+		// 	return;
+		// }
+		const defaultOption: DOMUtilsEventListenerOption = {
+			once: true,
+		};
+		Object.assign(defaultOption, option || {});
+		const eventNameList = DOMUtilsCommonUtils.getAnimationEndNameList();
+		DOMUtilsContext.on(element, eventNameList, null, handler, defaultOption);
+		if (!defaultOption.once) {
+			return {
+				off() {
+					DOMUtilsContext.off(element, eventNameList, null, handler, defaultOption);
+				},
+			};
+		}
+	}
+	/**
+	 * 当过渡结束时触发事件
+	 * @param element 监听的元素
+	 * @param handler 触发的回调函数
+	 * @param option 配置项，这里默认配置once为true
+	 */
+	transitionend(
+		element: HTMLElement | string,
+		handler: (this: HTMLElement, event: DOMUtils_Event["transitionend"]) => void,
+		option?: boolean | DOMUtilsEventListenerOption
+	) {
+		let DOMUtilsContext = this;
+		if (typeof element === "string") {
+			element = DOMUtilsContext.selector<HTMLElement>(element)!;
+		}
+		if (element == null) {
+			return;
+		}
+		// if (DOMUtilsCommonUtils.isNodeList(element)) {
+		// 	// 设置
+		// 	element.forEach(($ele) => {
+		// 		DOMUtilsContext.transitionend($ele as HTMLElement, handler, option);
+		// 	});
+		// 	return;
+		// }
+		const defaultOption: DOMUtilsEventListenerOption = {
+			once: true,
+		};
+		Object.assign(defaultOption, option || {});
+		const eventNameList = DOMUtilsCommonUtils.getTransitionEndNameList();
+		DOMUtilsContext.on(element, eventNameList, null, handler, defaultOption);
+		if (!defaultOption.once) {
+			return {
+				off() {
+					DOMUtilsContext.off(element, eventNameList, null, handler, defaultOption);
+				},
+			};
+		}
+	}
 	/**
 	 * 当按键松开时触发事件
 	 * keydown - > keypress - > keyup
@@ -1084,7 +1162,6 @@ export class DOMUtilsEvent {
 		}
 		DOMUtilsContext.on(element, "keypress", null, handler, option);
 	}
-
 	/**
      * 监听某个元素键盘按键事件或window全局按键事件
      * 按下有值的键时触发，按下Ctrl\Alt\Shift\Meta是无值键。按下先触发keydown事件，再触发keypress事件。