修复动画配置, 增加立刻执行设定; 修复props声明
parent
9227233d7a
commit
289c7142ef
|
@ -584,7 +584,7 @@ class AnimPart extends AttributePart {
|
|||
super(...args)
|
||||
}
|
||||
|
||||
commitValue({ type = 'fade', duration, custom } = {}) {
|
||||
commitValue({ type = 'fade', duration, custom, immediate = false } = {}) {
|
||||
let fromto = MODES[type] || MODES.fade
|
||||
|
||||
if (custom) {
|
||||
|
@ -593,6 +593,7 @@ class AnimPart extends AttributePart {
|
|||
this.element.$animate = function (out = false) {
|
||||
return animate.call(this, duration, fromto, out)
|
||||
}
|
||||
this.element.$animate.immediate = immediate
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -719,10 +720,10 @@ export function html(strings, ...values) {
|
|||
values
|
||||
}
|
||||
}
|
||||
export function raw(str) {
|
||||
let strings = [str]
|
||||
export function raw(str, ...args) {
|
||||
let strings = args.length ? str.split('%s') : [str]
|
||||
strings.raw = strings
|
||||
return html(strings)
|
||||
return html(strings, ...args)
|
||||
}
|
||||
export function svg(strings, ...values) {
|
||||
return {
|
||||
|
|
26
src/index.js
26
src/index.js
|
@ -62,15 +62,25 @@ export class Component extends HTMLElement {
|
|||
|
||||
static parseAnim() {
|
||||
if (this.hasOwnProperty('animation')) {
|
||||
let { type = 'fade', duration } = this.animation
|
||||
let {
|
||||
type = 'fade',
|
||||
duration,
|
||||
custom,
|
||||
immediate = false
|
||||
} = this.animation
|
||||
let fromto = MODES[type] || MODES.fade
|
||||
if (custom) {
|
||||
fromto = custom
|
||||
}
|
||||
Object.defineProperty(this.prototype, '$animate', {
|
||||
value(out) {
|
||||
if (this[__mounted__]) {
|
||||
return animate.call(this, duration, MODES[type], out)
|
||||
return animate.call(this, duration, fromto, out)
|
||||
}
|
||||
},
|
||||
enumerable: false
|
||||
})
|
||||
this.prototype.$animate.immediate = immediate
|
||||
delete this.animation
|
||||
}
|
||||
}
|
||||
|
@ -98,7 +108,6 @@ export class Component extends HTMLElement {
|
|||
k = camelize(k)
|
||||
}
|
||||
this[__props__].set(k, options)
|
||||
// this.createProperty(k, options)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -133,6 +142,7 @@ export class Component extends HTMLElement {
|
|||
|
||||
for (let [prop, options] of this.constructor[__props__]) {
|
||||
this.createProperty(prop, options)
|
||||
this.$requestUpdate(prop)
|
||||
}
|
||||
|
||||
this.created()
|
||||
|
@ -200,12 +210,7 @@ export class Component extends HTMLElement {
|
|||
#init() {
|
||||
// 这里重新赋值一次, 用于清除掉因为 observer 修正产生的变化
|
||||
this[__changed_props__] = new Map()
|
||||
|
||||
// 若无定义props时, 手动执行一次渲染
|
||||
if (this[__pending__] === false) {
|
||||
this[__pending__] = true
|
||||
nextTick(_ => this.#confirmUpdate())
|
||||
}
|
||||
this.$requestUpdate()
|
||||
}
|
||||
|
||||
#getPropOptions(name) {
|
||||
|
@ -336,6 +341,9 @@ export class Component extends HTMLElement {
|
|||
// 初始化时不触发updated回调
|
||||
if (this[__mounted__] === false) {
|
||||
this[__mounted__] = true
|
||||
if (this.$animate?.immediate) {
|
||||
this.$animate()
|
||||
}
|
||||
this.mounted()
|
||||
} else {
|
||||
this.updated(props)
|
||||
|
|
Loading…
Reference in New Issue