85 lines
2.0 KiB
Vue
85 lines
2.0 KiB
Vue
<template>
|
||
<view :animation="animationData" class="_refani" v-if="show" :style="cstyle">
|
||
<slot></slot>
|
||
</view>
|
||
</template>
|
||
<style scoped>
|
||
</style>
|
||
<script>
|
||
export default {
|
||
options: {
|
||
virtualHost: true
|
||
},
|
||
props: {
|
||
ani: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
ciystyle: {
|
||
type: [String, Object],
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
show: true,
|
||
mastyle: {height:'auto'},
|
||
animationData: {}
|
||
};
|
||
},
|
||
watch: {
|
||
ani(newD, oldD) {
|
||
this.Doani(newD);
|
||
}
|
||
},
|
||
computed: {
|
||
cstyle() {
|
||
this.mastyle.overflow = 'hidden';
|
||
var sty = this.ciystyle;
|
||
if(typeof(sty) == 'string')
|
||
sty = this.style2obj(sty, this.mastyle);
|
||
return sty;
|
||
}
|
||
},
|
||
mounted() {
|
||
this.rect = {};
|
||
if (this.ani)
|
||
this.Doani(this.ani);
|
||
},
|
||
methods: {
|
||
async Doani(opn) {
|
||
if (this._aniing)
|
||
return;
|
||
//opn，string=anis
|
||
//{anis:string/array, init:obj}
|
||
//in out show，先show，如果是out，show=false，其他不变
|
||
//多个step执行，微信小程序会出现合并执行的bug
|
||
//设置初始style，部分低版本浏览器无效，用16ms单帧替代
|
||
//init参数希望不同step表现不同，用anis[array]，step单独传参
|
||
//matrix，xx3d等，anis[string]未定义，需anis[array]。
|
||
this.show = true;
|
||
if (typeof(opn) == 'string') {
|
||
//ResizeObserver微信小程序不支持
|
||
if (opn.indexOf('hhauto') > -1) {
|
||
this.mastyle.height = 'auto';
|
||
this.mastyle.display = 'block';
|
||
await this.$nextTick();
|
||
var rect = await this.getrect('._refani');
|
||
//console.log('rect.height',rect.height,this.rect.height);
|
||
if (rect.width != 0 && rect.height != 0)
|
||
this.rect = rect;
|
||
if(this.rect.height)
|
||
opn = opn.replace('hhauto', 'hh' + this.rect.height);
|
||
else
|
||
opn = opn.replace('hhauto', 'hh0');
|
||
}
|
||
}
|
||
this._aniing = true;
|
||
await this.goani(opn, data => this.animationData = data, (key, val) => {
|
||
this.show = false;
|
||
});
|
||
this._aniing = false;
|
||
}
|
||
}
|
||
}
|
||
</script> |