增加基础动画的支持
parent
21a565e04c
commit
91ba64722e
38
src/index.js
38
src/index.js
|
@ -50,6 +50,7 @@ export class Component extends HTMLElement {
|
||||||
let list = []
|
let list = []
|
||||||
|
|
||||||
this.finalize()
|
this.finalize()
|
||||||
|
this.parseAnim()
|
||||||
|
|
||||||
this[__props__].forEach((options, prop) => {
|
this[__props__].forEach((options, prop) => {
|
||||||
list.push(prop.toLowerCase())
|
list.push(prop.toLowerCase())
|
||||||
|
@ -83,6 +84,39 @@ export class Component extends HTMLElement {
|
||||||
Object.defineProperty(this.prototype, name, descriptor)
|
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() {
|
static finalize() {
|
||||||
if (this[__finalized__]) {
|
if (this[__finalized__]) {
|
||||||
|
@ -154,6 +188,10 @@ export class Component extends HTMLElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
|
console.log('created::', this.anim)
|
||||||
|
if (this.anim) {
|
||||||
|
this.style.display = 'none'
|
||||||
|
}
|
||||||
this.#init()
|
this.#init()
|
||||||
adoptStyles(this.root, this.constructor.styles)
|
adoptStyles(this.root, this.constructor.styles)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue