增加基础动画的支持
parent
21a565e04c
commit
91ba64722e
38
src/index.js
38
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)
|
||||
|
||||
|
|
Loading…
Reference in New Issue