ph-utils 0.11.3 → 0.11.5

package/lib/dom.d.ts

@@ -1,3 +1,8 @@
+/**
+ * web(浏览器端) DOM 文件操作
+ * 现今不推荐在使用这种方式，现在开发前端的时候，推荐使用一些成熟的框架例如：React、Preact、Vue、Angular、Svelte、Ember、Knockout等
+ * 在使用这些框架的时候额外的一些不可避免的 dom 操作时才使用这个工具；如果确实需要使用原生开发推荐使用 jquery 或者想要更精简的话可以使用 https://github.com/finom/bala 封装
+ */
 /**
  * 根据选择器获取节点
  * @param {string} selector 选择器
@@ -37,17 +42,12 @@ export declare function removeClass(elem: HTMLElement, clazz: string): void;
  */
 export declare function hasClass(elem: HTMLElement, clazz: string): boolean;
 /**
- * 为节点添加 transition 属性，包括浏览器前缀
- * @param {HTMLElement} element 需要添加 css Transition 属性的节点
- * @param {string}      value   css transition 值
- */
-export declare function transition(element: HTMLElement, value: string): void;
-/**
- * 为节点添加 transform 属性，包括浏览器前缀
- * @param {HTMLElement} element  需要添加 css transform 属性的节点
- * @param {string}      value     css transform 值
+ * 切换指定元素的类名。
+ * 如果元素已包含该类名，则移除它；否则添加它。
+ * @param el - 要操作的 HTML 元素。
+ * @param clazz - 要切换的类名。
  */
-export declare function transform(element: HTMLElement, value: string): void;
+export declare function toggleClass(el: HTMLElement, clazz: string): void;
 /**
  * 为节点添加事件处理
  * @param {HTMLElement} element   添加事件的节点
@@ -162,7 +162,7 @@ export declare function formatStyle(styleObj: (string | undefined | null | "")[]
  * 对指定的 HTML 元素应用显示过渡效果。
  * @param target - 要应用过渡效果的 HTML 元素。
  * @param properties - 包含要改变的 CSS 属性及其目标值的数组。eg. [['opacity', '0.5']]
- * @param duration - 过渡效果的持续时间，默认为 "0.3s"。
+ * @param duration - 过渡效果的持续时间，如果不传, 则不会应用 transition-style, 可以自己在 css 中进行定义。
  * 该方法首先将元素的 display 属性设置为 "none"，然后设置过渡属性，
  * 在下一个 DOM 更新周期后显示元素并移除设置的属性，从而实现过渡效果。
  *

package/lib/dom.js

@@ -3,7 +3,6 @@
  * 现今不推荐在使用这种方式，现在开发前端的时候，推荐使用一些成熟的框架例如：React、Preact、Vue、Angular、Svelte、Ember、Knockout等
  * 在使用这些框架的时候额外的一些不可避免的 dom 操作时才使用这个工具；如果确实需要使用原生开发推荐使用 jquery 或者想要更精简的话可以使用 https://github.com/finom/bala 封装
  */
-const vendorPrefix = ["", "-webkit", "-moz-"];
 /**
  * 根据选择器获取节点
  * @param {string} selector 选择器
@@ -60,26 +59,18 @@ export function hasClass(elem, clazz) {
     return elem.classList.contains(clazz);
 }
 /**
- * 为节点添加 transition 属性，包括浏览器前缀
- * @param {HTMLElement} element 需要添加 css Transition 属性的节点
- * @param {string}      value   css transition 值
+ * 切换指定元素的类名。
+ * 如果元素已包含该类名，则移除它；否则添加它。
+ * @param el - 要操作的 HTML 元素。
+ * @param clazz - 要切换的类名。
  */
-export function transition(element, value) {
-    vendorPrefix.forEach((prefix) => {
-        let t = prefix === "" ? "transition" : prefix + "Transition";
-        element.style[t] = value;
-    });
-}
-/**
- * 为节点添加 transform 属性，包括浏览器前缀
- * @param {HTMLElement} element  需要添加 css transform 属性的节点
- * @param {string}      value     css transform 值
- */
-export function transform(element, value) {
-    vendorPrefix.forEach((prefix) => {
-        let t = prefix === "" ? "transform" : prefix + "Transform";
-        element.style[t] = value;
-    });
+export function toggleClass(el, clazz) {
+    if (hasClass(el, clazz)) {
+        removeClass(el, clazz);
+    }
+    else {
+        addClass(el, clazz);
+    }
 }
 /**
  * 为节点添加事件处理
@@ -345,7 +336,7 @@ export function formatStyle(styleObj) {
  * 对指定的 HTML 元素应用显示过渡效果。
  * @param target - 要应用过渡效果的 HTML 元素。
  * @param properties - 包含要改变的 CSS 属性及其目标值的数组。eg. [['opacity', '0.5']]
- * @param duration - 过渡效果的持续时间，默认为 "0.3s"。
+ * @param duration - 过渡效果的持续时间，如果不传, 则不会应用 transition-style, 可以自己在 css 中进行定义。
  * 该方法首先将元素的 display 属性设置为 "none"，然后设置过渡属性，
  * 在下一个 DOM 更新周期后显示元素并移除设置的属性，从而实现过渡效果。
  *
@@ -367,14 +358,12 @@ export function startTransition(target, properties, duration) {
     if (duration) {
         target.style.setProperty("transition", trans.join(", "));
     }
-    queueMicrotask(() => {
-        target.style.removeProperty("display");
-        queueMicrotask(() => {
-            for (let i = 0, len = properties.length; i < len; i++) {
-                const rec = properties[i];
-                target.style.removeProperty(rec[0]);
-            }
-        });
+    target.style.removeProperty("display");
+    requestAnimationFrame(() => {
+        for (let i = 0, len = properties.length; i < len; i++) {
+            const rec = properties[i];
+            target.style.removeProperty(rec[0]);
+        }
     });
 }
 /**

package/package.json

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