From 91ba64722ec1d79b8ae5a6c434e00fceb06f4dc0 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 28 Mar 2023 19:35:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9F=BA=E7=A1=80=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E7=9A=84=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/index.js b/src/index.js
index 532b8ff..1b6912a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -50,6 +50,7 @@ export class Component extends HTMLElement {
     let list = []
 
     this.finalize()
+    this.parseAnim()
 
     this[__props__].forEach((options, prop) => {
       list.push(prop.toLowerCase())
@@ -83,6 +84,39 @@ export class Component extends HTMLElement {
     Object.defineProperty(this.prototype, name, descriptor)
   }
 
+  static parseAnim() {
+    if (this.hasOwnProperty('animation')) {
+      let { type = 'fade', duration = 300 } = this.animation
+      Object.defineProperty(this.prototype, 'anim', {
+        get() {
+          return {
+            type,
+            duration,
+            start: () => {
+              //
+              this.style.display = ''
+              this.style.transition = `opacity ${duration}ms ease`
+              setTimeout(() => {
+                this.style.transition = ''
+              }, duration)
+            },
+            end: () => {
+              this.style.transition = `opacity ${duration}ms ease`
+              this.style.opacity = 0
+              setTimeout(() => {
+                this.style.display = 'none'
+                this.style.transition = ''
+                this.style.opacity = ''
+              }, duration)
+            }
+          }
+        },
+        enumerable: false
+      })
+      delete this.animation
+    }
+  }
+
   // 处理静态声明
   static finalize() {
     if (this[__finalized__]) {
@@ -154,6 +188,10 @@ export class Component extends HTMLElement {
   }
 
   connectedCallback() {
+    console.log('created::', this.anim)
+    if (this.anim) {
+      this.style.display = 'none'
+    }
     this.#init()
     adoptStyles(this.root, this.constructor.styles)