|
|
@ -132,10 +132,10 @@ export default { |
|
|
|
* @param {Object} obj |
|
|
|
*/ |
|
|
|
step(obj, config = {}) { |
|
|
|
if (!this.animation) return |
|
|
|
if (!this.animation) return this |
|
|
|
for (let i in obj) { |
|
|
|
try { |
|
|
|
if (typeof this.animation[i] === 'function') { |
|
|
|
if (this.animation && typeof this.animation[i] === 'function') { |
|
|
|
if(typeof obj[i] === 'object'){ |
|
|
|
this.animation[i](...obj[i]) |
|
|
|
}else{ |
|
|
@ -143,11 +143,15 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.error(`方法 ${i} 不存在`) |
|
|
|
console.error(`方法 ${i} 不存在:`, e) |
|
|
|
} |
|
|
|
} |
|
|
|
if (this.animation && typeof this.animation.step === 'function') { |
|
|
|
this.animation.step(config) |
|
|
|
try { |
|
|
|
if (this.animation && typeof this.animation.step === 'function') { |
|
|
|
this.animation.step(config) |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.error('动画step执行错误:', e) |
|
|
|
} |
|
|
|
return this |
|
|
|
}, |
|
|
@ -156,8 +160,12 @@ export default { |
|
|
|
*/ |
|
|
|
run(fn) { |
|
|
|
if (!this.animation) return |
|
|
|
if (typeof this.animation.run === 'function') { |
|
|
|
this.animation.run(fn) |
|
|
|
try { |
|
|
|
if (this.animation && typeof this.animation.run === 'function') { |
|
|
|
this.animation.run(fn) |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.error('动画执行错误:', e) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 开始过度动画 |
|
|
@ -174,12 +182,19 @@ export default { |
|
|
|
this.$nextTick(() => { |
|
|
|
// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器 |
|
|
|
this.timer = setTimeout(() => { |
|
|
|
this.animation = createAnimation(this.config, this) |
|
|
|
if (this.animation) { |
|
|
|
this.tranfromInit(false).step() |
|
|
|
if (typeof this.animation.run === 'function') { |
|
|
|
this.animation.run() |
|
|
|
try { |
|
|
|
this.animation = createAnimation(this.config, this) |
|
|
|
if (this.animation) { |
|
|
|
let result = this.tranfromInit(false) |
|
|
|
if (result && typeof result.step === 'function') { |
|
|
|
result.step() |
|
|
|
if (typeof result.run === 'function') { |
|
|
|
result.run() |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.error('动画初始化错误:', e) |
|
|
|
} |
|
|
|
this.$emit('change', { |
|
|
|
detail: this.isShow |
|
|
@ -190,19 +205,27 @@ export default { |
|
|
|
// 关闭过度动画 |
|
|
|
close(type) { |
|
|
|
if (!this.animation) return |
|
|
|
this.tranfromInit(true) |
|
|
|
.step() |
|
|
|
.run(() => { |
|
|
|
this.isShow = false |
|
|
|
this.animationData = null |
|
|
|
this.animation = null |
|
|
|
let { opacity, transform } = this.styleInit(false) |
|
|
|
this.opacity = opacity || 1 |
|
|
|
this.transform = transform |
|
|
|
this.$emit('change', { |
|
|
|
detail: this.isShow |
|
|
|
}) |
|
|
|
}) |
|
|
|
try { |
|
|
|
let result = this.tranfromInit(true) |
|
|
|
if (result && typeof result.step === 'function') { |
|
|
|
result.step() |
|
|
|
if (typeof result.run === 'function') { |
|
|
|
result.run(() => { |
|
|
|
this.isShow = false |
|
|
|
this.animationData = null |
|
|
|
this.animation = null |
|
|
|
let { opacity, transform } = this.styleInit(false) |
|
|
|
this.opacity = opacity || 1 |
|
|
|
this.transform = transform |
|
|
|
this.$emit('change', { |
|
|
|
detail: this.isShow |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.error('动画关闭错误:', e) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 处理动画开始前的默认样式 |
|
|
|
styleInit(type) { |
|
|
|