增加基础动画的支持

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)