新增 :animation 與 :mask 屬性以及圖片延遲載入的優化，增加過度效果，以提升載入體驗。

Author: pardnchiu

README.en.md

@@ -48,6 +48,8 @@ Automatic Rendering: Automatically reloads when data changes are detected.
 | `:if`<br>`:else-if`<br>`:elif`<br>`:else` | Displays or hides elements based on specified conditions, enabling branching logic. |
 | `:model` | Binds data to form elements (e.g., `input`), updating data automatically when input changes. |
 | `:hide` | Hides elements based on specific conditions. |
+| `:animation` | Specifies transition effects for elements, such as `fade-in` or `expand`, to enhance user experience. |
+| `:mask` | Controls block loading animations, supporting `true|false|1|0`, to enhance dynamic visual effects during loading. |
 | `:[attr]` | Sets element attributes, such as `ID`, `class`, image source, etc.<br>Examples: `:id`/`:class`/`:src`/`:alt`/`:href`... |
 | `@[event]` | Adds event listeners that trigger specified actions upon activation.<br>Examples: `@click`/`@input`/`@mousedown`... |
 | `:@[event]` | Sets event handlers for individual elements within loops, allowing different handlers for each element. |

README.md

@@ -1,4 +1,4 @@
-# PDQuickUI (JavaScript Library)
+# PDQuickUI
 
 ![](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) ![](https://img.shields.io/github/size/pardnchiu/PDQuickUI/dist%2FPDQuickUI.js)<br>
 [![](https://img.shields.io/github/v/release/pardnchiu/PDQuickUI)](https://github.com/pardnchiu/PDQuickUI) [![](https://img.shields.io/npm/v/pdquickui)](https://www.npmjs.com/package/pdquickui) ![](https://img.shields.io/github/license/pardnchiu/PDQuickUI)<br>
@@ -15,7 +15,7 @@
 - **清晰的架構**：UI 和資料邏輯分離，維護方便。
 - **代碼簡潔**：減少重複代碼，提升可讀性。
 - **自動渲染**：監控資料變動並自動更新，減少手動操作。
-- **輕量化**：功能完整的同時，文件大小控制在 `20kb` 以內。
+- **輕量化**：使用原生 JS 和內建 API 撰寫，無任何外部依賴。
 
 ## 安裝方式
 
@@ -48,6 +48,8 @@
 | `:if`<br>`:else-if`<br>`:elif`<br>`:else` | 根據條件顯示或隱藏元素，實現分支邏輯。 |
 | `:model` | 將資料綁定到表單元素（如 `input`），當輸入變更時自動更新資料。 |
 | `:hide` | 根據特定條件隱藏元素。 |
+| `:animation` | 用於指定元素的過渡效果，如 `fade-in` 或 `expand`，以增強用戶體驗。 |
+| `:mask` | 控制區塊載入時的動畫效果，支援 `true|false|1|0`，提升載入動態視覺效果。 |
 | `:[attr]` | 設定元素屬性，例如 `ID`、`class`、圖像來源等。<br>範例：`:id`、`:class`、`:src`、`:alt`、`:href`... |
 | `@[event]` | 添加事件監聽器，當事件觸發時執行指定操作。<br>範例：`@click`、`@input`、`@mousedown`... |
 

dist/PDQuickUI.css

@@ -0,0 +1,96 @@
+*[\:animation="fade-in"],
+*[animation="fade-in"] {
+    opacity: 0;
+    transition: opacity 0.3s ease-in 0s;
+}
+
+*[\:animation="fade-in"].show,
+*[animation="fade-in"].show {
+    opacity: 1;
+}
+
+*[\:animation="expand"],
+*[animation="expand"] {
+    min-height: 0;
+    height: 0;
+    overflow: hidden;
+    transition: min-height 0.3s ease-in 0s;
+}
+
+*[\:animation="expand"].show,
+*[animation="expand"].show {
+    opacity: 1;
+}
+
+*[\:mask="1=true"],
+*[mask="true"],
+*[\:mask="1"],
+*[mask="1"] {
+    position: relative;
+}
+
+*[\:mask="1=true"]::after,
+*[mask="true"]::after,
+*[\:mask="1"]::after,
+*[mask="1"]::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to right, #e0e0e0 25%, #f0f0f0, #e0e0e0 75%);
+    /* 使用灰色漸層 */
+    background-size: 200% 100%;
+    /* 背景尺寸兩倍寬度 */
+    animation: loading-animation 1.5s infinite alternate;
+    /* 來回移動動畫 */
+    z-index: 10;
+    transition: 0.3s;
+}
+
+*[\:mask="1=true"]::after,
+*[mask="true"]::after,
+*[\:mask="1"].show::after,
+*[mask="1"].show::after {
+    opacity: 0;
+}
+
+@keyframes loading-animation {
+    0% {
+        background-position: -100% 0;
+    }
+
+    100% {
+        background-position: 100% 0;
+    }
+}
+
+img[lazyload]:not([lazyload=""]) {
+    width: 1rem;
+    height: 1rem;
+    border: 0.25rem solid rgba(0, 0, 0, 0.1);
+    border-top-color: #3498db;
+    border-radius: 50%;
+    animation: spin 2s ease-in-out infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+img[src]:not([src=""]) {
+    width: unset;
+    height: unset;
+    border: 0 solid transparent;
+    border-radius: 0;
+    animation: none;
+    transition: width 0.3s;
+    transition: height 0.3s;
+}