ph-utils 0.15.0 → 0.15.2

package/lib/dom.d.ts

@@ -82,7 +82,7 @@ export declare function toggleClass(el: HTMLElement, clazz: string): void;
  * @param {function}    event     事件处理函数
  * @param {boolean}     onceOrConfig  是否是只运行一次的处理函数或者配置，其中 eventFlag 为 string，如果配置该项，则表明为委托事件
  */
-export declare function on(element: HTMLElement | ShadowRoot | Document, listener: string, fn: EventListener, option?: boolean | (AddEventListenerOptions & {
+export declare function on(element: HTMLElement | ShadowRoot | Document | HTMLCollection | NodeListOf<HTMLElement> | HTMLElement[], listener: string, fn: EventListener, option?: boolean | (AddEventListenerOptions & {
     eventFlag?: string;
 })): void;
 /**
@@ -91,7 +91,7 @@ export declare function on(element: HTMLElement | ShadowRoot | Document, listene
  * @param listener - 事件名称。
  * @param fn - 要移除的事件监听器函数。
  */
-export declare function off(el: HTMLElement | ShadowRoot | Document, listener: string, fn: EventListener, option?: boolean | EventListenerOptions): void;
+export declare function off(el: HTMLElement | ShadowRoot | Document | HTMLCollection | NodeListOf<HTMLElement> | HTMLElement[], listener: string, fn: EventListener, option?: boolean | EventListenerOptions): void;
 /**
  * 判断事件是否应该继续传递。
  * 从事件目标开始向上遍历DOM树，检查每个节点上是否存在指定的属性。
@@ -124,7 +124,7 @@ export declare function text(element: HTMLElement, textstr?: string): string | n
  * @param elems
  * @param fn 遍历到节点时的回调，回调第一个参数为遍历到的节点，第2个参数为 index；如果回调函数返回 true，则会终止遍历(break)
  */
-export declare function iterate(elems: NodeList | HTMLElement[], fn: (el: HTMLElement, index: number) => any): void;
+export declare function iterate<T>(elems: NodeList | HTMLCollection | T[], fn: (el: HTMLElement | T, index: number) => any): void;
 /**
  * 设置或获取节点 data-* 属性
  * @param elem

package/lib/dom.js

@@ -133,7 +133,14 @@ export function on(element, listener, fn, option) {
             element.setAttribute(option.eventFlag, "__stop__");
         }
     }
-    element.addEventListener(listener, fn, option);
+    if (element.length) {
+        iterate(element, (elem) => {
+            elem.addEventListener(listener, fn, option);
+        });
+    }
+    else if (element) {
+        element.addEventListener(listener, fn, option);
+    }
 }
 /**
  * 移除指定元素的事件监听器。
@@ -142,7 +149,14 @@ export function on(element, listener, fn, option) {
  * @param fn - 要移除的事件监听器函数。
  */
 export function off(el, listener, fn, option) {
-    el.removeEventListener(listener, fn, option);
+    if (el.length) {
+        iterate(el, (elem) => {
+            elem.removeEventListener(listener, fn, option);
+        });
+    }
+    else if (el) {
+        el.removeEventListener(listener, fn, option);
+    }
 }
 /**
  * 判断事件是否应该继续传递。
@@ -439,6 +453,8 @@ function toggleCssProperty(el, properties, method = "set") {
 export function transition(el, nameOrProperties, dir = "enter", finish) {
     const p = dir === "enter" ? "from" : "to";
     let nameClass = "", activeClass = "";
+    /** 动画状态, -1 - 准备, 0 - 进行中, 1 - 完成 */
+    let status = -1;
     const trans = [];
     if (typeof nameOrProperties === "string") {
         nameClass = `${nameOrProperties}-${dir}-${p}`;
@@ -452,6 +468,7 @@ export function transition(el, nameOrProperties, dir = "enter", finish) {
             }
         }
     }
+    status = 0;
     if (dir === "enter") {
         if (nameClass) {
             el.classList.add(nameClass);
@@ -490,25 +507,26 @@ export function transition(el, nameOrProperties, dir = "enter", finish) {
             });
         }
     }
-    el.addEventListener("transitionend", () => {
-        if (nameClass) {
-            el.classList.remove(activeClass);
-            requestAnimationFrame(() => {
-                el.classList.remove(nameClass);
-            });
-        }
-        else {
-            if (trans) {
-                el.style.removeProperty("transition");
+    el.addEventListener("transitionend", (e) => {
+        if (status === 0) {
+            status = 1;
+            if (nameClass) {
+                el.classList.remove(activeClass);
+                requestAnimationFrame(() => {
+                    el.classList.remove(nameClass);
+                });
             }
-            requestAnimationFrame(() => {
+            else {
+                if (trans) {
+                    el.style.removeProperty("transition");
+                }
                 requestAnimationFrame(() => {
                     toggleCssProperty(el, nameOrProperties, "remove");
                 });
-            });
-        }
-        if (finish) {
-            finish();
+            }
+            if (finish) {
+                finish();
+            }
         }
     }, { once: true });
 }

package/package.json

@@ -68,7 +68,7 @@
     },
     "./*": "./lib/*"
   },
-  "version": "0.15.0",
+  "version": "0.15.2",
   "type": "module",
   "repository": {
     "type": "git",