增加基础动画的支持

pull/1/head
yutent 2023-03-28 19:35:47 +08:00
parent 21a565e04c
commit 91ba64722e
1 changed files with 38 additions and 0 deletions

View File

@ -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)