|
|
|
@ -1,16 +1,20 @@ |
|
|
|
<template> |
|
|
|
<!-- #ifndef APP-NVUE --> |
|
|
|
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> |
|
|
|
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"> |
|
|
|
<slot></slot> |
|
|
|
</view> |
|
|
|
<!-- #endif --> |
|
|
|
<!-- #ifdef APP-NVUE --> |
|
|
|
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> |
|
|
|
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"> |
|
|
|
<slot></slot> |
|
|
|
</view> |
|
|
|
<!-- #endif --> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { createAnimation } from './createAnimation' |
|
|
|
import { createAnimation } from './createAnimation' |
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
* Transition 过渡动画 |
|
|
|
* @description 简单过渡动画组件 |
|
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=985 |
|
|
|
@ -26,9 +30,9 @@ import { createAnimation } from './createAnimation' |
|
|
|
* @property {Number} duration 过渡动画持续时间 |
|
|
|
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red` |
|
|
|
*/ |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: 'uniTransition', |
|
|
|
emits:['click','change'], |
|
|
|
emits: ['click', 'change'], |
|
|
|
props: { |
|
|
|
show: { |
|
|
|
type: Boolean, |
|
|
|
@ -36,7 +40,7 @@ export default { |
|
|
|
}, |
|
|
|
modeClass: { |
|
|
|
type: [Array, String], |
|
|
|
default() { |
|
|
|
default () { |
|
|
|
return 'fade' |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -46,24 +50,24 @@ export default { |
|
|
|
}, |
|
|
|
styles: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
default () { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
customClass:{ |
|
|
|
customClass: { |
|
|
|
type: String, |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
onceRender:{ |
|
|
|
type:Boolean, |
|
|
|
default:false |
|
|
|
onceRender: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isShow: false, |
|
|
|
transform: '', |
|
|
|
opacity: 1, |
|
|
|
opacity: 0, |
|
|
|
animationData: {}, |
|
|
|
durationTime: 300, |
|
|
|
config: {} |
|
|
|
@ -121,7 +125,7 @@ export default { |
|
|
|
if (obj.duration) { |
|
|
|
this.durationTime = obj.duration |
|
|
|
} |
|
|
|
this.animation = createAnimation(Object.assign(this.config, obj),this) |
|
|
|
this.animation = createAnimation(Object.assign(this.config, obj), this) |
|
|
|
}, |
|
|
|
/** |
|
|
|
* 点击组件触发回调 |
|
|
|
@ -136,18 +140,15 @@ export default { |
|
|
|
* @param {Object} obj |
|
|
|
*/ |
|
|
|
step(obj, config = {}) { |
|
|
|
if (!this.animation) return |
|
|
|
for (let i in obj) { |
|
|
|
try { |
|
|
|
if(typeof obj[i] === 'object'){ |
|
|
|
this.animation[i](...obj[i]) |
|
|
|
}else{ |
|
|
|
this.animation[i](obj[i]) |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.error(`方法 ${i} 不存在`) |
|
|
|
} |
|
|
|
if (!this.animation) return this |
|
|
|
Object.keys(obj).forEach(key => { |
|
|
|
const value = obj[key] |
|
|
|
if (typeof this.animation[key] === 'function') { |
|
|
|
Array.isArray(value) ? |
|
|
|
this.animation[key](...value) : |
|
|
|
this.animation[key](value) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.animation.step(config) |
|
|
|
return this |
|
|
|
}, |
|
|
|
@ -161,24 +162,31 @@ export default { |
|
|
|
// 开始过度动画 |
|
|
|
open() { |
|
|
|
clearTimeout(this.timer) |
|
|
|
this.transform = '' |
|
|
|
this.isShow = true |
|
|
|
let { opacity, transform } = this.styleInit(false) |
|
|
|
if (typeof opacity !== 'undefined') { |
|
|
|
this.opacity = opacity |
|
|
|
} |
|
|
|
this.transform = transform |
|
|
|
// 新增初始状态重置逻辑（关键） |
|
|
|
this.transform = this.styleInit(false).transform || '' |
|
|
|
this.opacity = this.styleInit(false).opacity || 0 |
|
|
|
|
|
|
|
// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常 |
|
|
|
this.$nextTick(() => { |
|
|
|
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器 |
|
|
|
this.timer = setTimeout(() => { |
|
|
|
this.animation = createAnimation(this.config, this) |
|
|
|
this.tranfromInit(false).step() |
|
|
|
this.animation.run() |
|
|
|
this.animation.run(() => { |
|
|
|
// #ifdef APP-NVUE |
|
|
|
this.transform = this.styleInit(false).transform || '' |
|
|
|
this.opacity = this.styleInit(false).opacity || 1 |
|
|
|
// #endif |
|
|
|
// #ifndef APP-NVUE |
|
|
|
this.transform = '' |
|
|
|
this.opacity = this.styleInit(false).opacity || 1 |
|
|
|
// #endif |
|
|
|
this.$emit('change', { |
|
|
|
detail: this.isShow |
|
|
|
}) |
|
|
|
}, 20) |
|
|
|
}) |
|
|
|
}, 80) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 关闭过度动画 |
|
|
|
@ -200,22 +208,20 @@ export default { |
|
|
|
}, |
|
|
|
// 处理动画开始前的默认样式 |
|
|
|
styleInit(type) { |
|
|
|
let styles = { |
|
|
|
transform: '' |
|
|
|
} |
|
|
|
let buildStyle = (type, mode) => { |
|
|
|
if (mode === 'fade') { |
|
|
|
styles.opacity = this.animationType(type)[mode] |
|
|
|
let styles = { transform: '', opacity: 1 } |
|
|
|
const buildStyle = (type, mode) => { |
|
|
|
const value = this.animationType(type)[mode] // 直接使用 type 控制状态 |
|
|
|
if (mode.startsWith('fade')) { |
|
|
|
styles.opacity = value |
|
|
|
} else { |
|
|
|
styles.transform += this.animationType(type)[mode] + ' ' |
|
|
|
styles.transform += value + ' ' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (typeof this.modeClass === 'string') { |
|
|
|
buildStyle(type, this.modeClass) |
|
|
|
} else { |
|
|
|
this.modeClass.forEach(mode => { |
|
|
|
buildStyle(type, mode) |
|
|
|
}) |
|
|
|
this.modeClass.forEach(mode => buildStyle(type, mode)) |
|
|
|
} |
|
|
|
return styles |
|
|
|
}, |
|
|
|
@ -280,7 +286,7 @@ export default { |
|
|
|
return name.replace(/([A-Z])/g, '-$1').toLowerCase() |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style></style> |
|
|
|
|
