|
@@ -1,23 +1,14 @@
|
|
<template>
|
|
<template>
|
|
- <view
|
|
|
|
- v-if="isShow"
|
|
|
|
- ref="ani"
|
|
|
|
- :animation="animationData"
|
|
|
|
- :class="customClass"
|
|
|
|
- :style="transformStyles"
|
|
|
|
- @click="onClick"
|
|
|
|
- >
|
|
|
|
- <slot></slot>
|
|
|
|
- </view>
|
|
|
|
- <!-- #ifdef MP -->
|
|
|
|
- <view v-else style="display: none">
|
|
|
|
- <slot></slot>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <!-- #ifndef APP-NVUE -->
|
|
|
|
+ <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>
|
|
<!-- #endif -->
|
|
<!-- #endif -->
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { createAnimation } from './createAnimation';
|
|
|
|
|
|
+import { createAnimation } from './createAnimation'
|
|
|
|
|
|
/**
|
|
/**
|
|
* Transition 过渡动画
|
|
* Transition 过渡动画
|
|
@@ -37,7 +28,7 @@ import { createAnimation } from './createAnimation';
|
|
*/
|
|
*/
|
|
export default {
|
|
export default {
|
|
name: 'uniTransition',
|
|
name: 'uniTransition',
|
|
- emits: ['click', 'change'],
|
|
|
|
|
|
+ emits:['click','change'],
|
|
props: {
|
|
props: {
|
|
show: {
|
|
show: {
|
|
type: Boolean,
|
|
type: Boolean,
|
|
@@ -46,7 +37,7 @@ export default {
|
|
modeClass: {
|
|
modeClass: {
|
|
type: [Array, String],
|
|
type: [Array, String],
|
|
default() {
|
|
default() {
|
|
- return 'fade';
|
|
|
|
|
|
+ return 'fade'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
duration: {
|
|
duration: {
|
|
@@ -56,13 +47,17 @@ export default {
|
|
styles: {
|
|
styles: {
|
|
type: Object,
|
|
type: Object,
|
|
default() {
|
|
default() {
|
|
- return {};
|
|
|
|
|
|
+ return {}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- customClass: {
|
|
|
|
|
|
+ customClass:{
|
|
type: String,
|
|
type: String,
|
|
default: ''
|
|
default: ''
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ onceRender:{
|
|
|
|
+ type:Boolean,
|
|
|
|
+ default:false
|
|
|
|
+ },
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -72,17 +67,17 @@ export default {
|
|
animationData: {},
|
|
animationData: {},
|
|
durationTime: 300,
|
|
durationTime: 300,
|
|
config: {}
|
|
config: {}
|
|
- };
|
|
|
|
|
|
+ }
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
show: {
|
|
show: {
|
|
handler(newVal) {
|
|
handler(newVal) {
|
|
if (newVal) {
|
|
if (newVal) {
|
|
- this.open();
|
|
|
|
|
|
+ this.open()
|
|
} else {
|
|
} else {
|
|
// 避免上来就执行 close,导致动画错乱
|
|
// 避免上来就执行 close,导致动画错乱
|
|
if (this.isShow) {
|
|
if (this.isShow) {
|
|
- this.close();
|
|
|
|
|
|
+ this.close()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -95,25 +90,17 @@ export default {
|
|
let styles = {
|
|
let styles = {
|
|
...this.styles,
|
|
...this.styles,
|
|
'transition-duration': this.duration / 1000 + 's'
|
|
'transition-duration': this.duration / 1000 + 's'
|
|
- };
|
|
|
|
- let transform = '';
|
|
|
|
|
|
+ }
|
|
|
|
+ let transform = ''
|
|
for (let i in styles) {
|
|
for (let i in styles) {
|
|
- let line = this.toLine(i);
|
|
|
|
- transform += line + ':' + styles[i] + ';';
|
|
|
|
|
|
+ let line = this.toLine(i)
|
|
|
|
+ transform += line + ':' + styles[i] + ';'
|
|
}
|
|
}
|
|
- return transform;
|
|
|
|
|
|
+ return transform
|
|
},
|
|
},
|
|
// 初始化动画条件
|
|
// 初始化动画条件
|
|
transformStyles() {
|
|
transformStyles() {
|
|
- return (
|
|
|
|
- 'transform:' +
|
|
|
|
- this.transform +
|
|
|
|
- ';' +
|
|
|
|
- 'opacity:' +
|
|
|
|
- this.opacity +
|
|
|
|
- ';' +
|
|
|
|
- this.stylesObject
|
|
|
|
- );
|
|
|
|
|
|
+ return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
@@ -123,8 +110,8 @@ export default {
|
|
timingFunction: 'ease',
|
|
timingFunction: 'ease',
|
|
transformOrigin: '50% 50%',
|
|
transformOrigin: '50% 50%',
|
|
delay: 0
|
|
delay: 0
|
|
- };
|
|
|
|
- this.durationTime = this.duration;
|
|
|
|
|
|
+ }
|
|
|
|
+ this.durationTime = this.duration
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
/**
|
|
/**
|
|
@@ -132,9 +119,9 @@ export default {
|
|
*/
|
|
*/
|
|
init(obj = {}) {
|
|
init(obj = {}) {
|
|
if (obj.duration) {
|
|
if (obj.duration) {
|
|
- this.durationTime = obj.duration;
|
|
|
|
|
|
+ this.durationTime = obj.duration
|
|
}
|
|
}
|
|
- this.animation = createAnimation(Object.assign(this.config, obj), this);
|
|
|
|
|
|
+ this.animation = createAnimation(Object.assign(this.config, obj),this)
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* 点击组件触发回调
|
|
* 点击组件触发回调
|
|
@@ -142,139 +129,139 @@ export default {
|
|
onClick() {
|
|
onClick() {
|
|
this.$emit('click', {
|
|
this.$emit('click', {
|
|
detail: this.isShow
|
|
detail: this.isShow
|
|
- });
|
|
|
|
|
|
+ })
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* ref 触发 动画分组
|
|
* ref 触发 动画分组
|
|
* @param {Object} obj
|
|
* @param {Object} obj
|
|
*/
|
|
*/
|
|
step(obj, config = {}) {
|
|
step(obj, config = {}) {
|
|
- if (!this.animation) return;
|
|
|
|
|
|
+ if (!this.animation) return
|
|
for (let i in obj) {
|
|
for (let i in obj) {
|
|
try {
|
|
try {
|
|
- if (typeof obj[i] === 'object') {
|
|
|
|
- this.animation[i](...obj[i]);
|
|
|
|
- } else {
|
|
|
|
- this.animation[i](obj[i]);
|
|
|
|
|
|
+ if(typeof obj[i] === 'object'){
|
|
|
|
+ this.animation[i](...obj[i])
|
|
|
|
+ }else{
|
|
|
|
+ this.animation[i](obj[i])
|
|
}
|
|
}
|
|
} catch (e) {
|
|
} catch (e) {
|
|
- console.error(`方法 ${i} 不存在`);
|
|
|
|
|
|
+ console.error(`方法 ${i} 不存在`)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- this.animation.step(config);
|
|
|
|
- return this;
|
|
|
|
|
|
+ this.animation.step(config)
|
|
|
|
+ return this
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* ref 触发 执行动画
|
|
* ref 触发 执行动画
|
|
*/
|
|
*/
|
|
run(fn) {
|
|
run(fn) {
|
|
- if (!this.animation) return;
|
|
|
|
- this.animation.run(fn);
|
|
|
|
|
|
+ if (!this.animation) return
|
|
|
|
+ this.animation.run(fn)
|
|
},
|
|
},
|
|
// 开始过度动画
|
|
// 开始过度动画
|
|
open() {
|
|
open() {
|
|
- clearTimeout(this.timer);
|
|
|
|
- this.transform = '';
|
|
|
|
- this.isShow = true;
|
|
|
|
- let { opacity, transform } = this.styleInit(false);
|
|
|
|
|
|
+ clearTimeout(this.timer)
|
|
|
|
+ this.transform = ''
|
|
|
|
+ this.isShow = true
|
|
|
|
+ let { opacity, transform } = this.styleInit(false)
|
|
if (typeof opacity !== 'undefined') {
|
|
if (typeof opacity !== 'undefined') {
|
|
- this.opacity = opacity;
|
|
|
|
|
|
+ this.opacity = opacity
|
|
}
|
|
}
|
|
- this.transform = transform;
|
|
|
|
|
|
+ this.transform = transform
|
|
// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
|
|
// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
|
|
// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
|
|
this.timer = setTimeout(() => {
|
|
this.timer = setTimeout(() => {
|
|
- this.animation = createAnimation(this.config, this);
|
|
|
|
- this.tranfromInit(false).step();
|
|
|
|
- this.animation.run();
|
|
|
|
|
|
+ this.animation = createAnimation(this.config, this)
|
|
|
|
+ this.tranfromInit(false).step()
|
|
|
|
+ this.animation.run()
|
|
this.$emit('change', {
|
|
this.$emit('change', {
|
|
detail: this.isShow
|
|
detail: this.isShow
|
|
- });
|
|
|
|
- }, 20);
|
|
|
|
- });
|
|
|
|
|
|
+ })
|
|
|
|
+ }, 20)
|
|
|
|
+ })
|
|
},
|
|
},
|
|
// 关闭过度动画
|
|
// 关闭过度动画
|
|
close(type) {
|
|
close(type) {
|
|
- if (!this.animation) return;
|
|
|
|
|
|
+ if (!this.animation) return
|
|
this.tranfromInit(true)
|
|
this.tranfromInit(true)
|
|
.step()
|
|
.step()
|
|
.run(() => {
|
|
.run(() => {
|
|
- this.isShow = false;
|
|
|
|
- this.animationData = null;
|
|
|
|
- this.animation = null;
|
|
|
|
- let { opacity, transform } = this.styleInit(false);
|
|
|
|
- this.opacity = opacity || 1;
|
|
|
|
- this.transform = transform;
|
|
|
|
|
|
+ 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', {
|
|
this.$emit('change', {
|
|
detail: this.isShow
|
|
detail: this.isShow
|
|
- });
|
|
|
|
- });
|
|
|
|
|
|
+ })
|
|
|
|
+ })
|
|
},
|
|
},
|
|
// 处理动画开始前的默认样式
|
|
// 处理动画开始前的默认样式
|
|
styleInit(type) {
|
|
styleInit(type) {
|
|
let styles = {
|
|
let styles = {
|
|
transform: ''
|
|
transform: ''
|
|
- };
|
|
|
|
|
|
+ }
|
|
let buildStyle = (type, mode) => {
|
|
let buildStyle = (type, mode) => {
|
|
if (mode === 'fade') {
|
|
if (mode === 'fade') {
|
|
- styles.opacity = this.animationType(type)[mode];
|
|
|
|
|
|
+ styles.opacity = this.animationType(type)[mode]
|
|
} else {
|
|
} else {
|
|
- styles.transform += this.animationType(type)[mode] + ' ';
|
|
|
|
|
|
+ styles.transform += this.animationType(type)[mode] + ' '
|
|
}
|
|
}
|
|
- };
|
|
|
|
|
|
+ }
|
|
if (typeof this.modeClass === 'string') {
|
|
if (typeof this.modeClass === 'string') {
|
|
- buildStyle(type, this.modeClass);
|
|
|
|
|
|
+ buildStyle(type, this.modeClass)
|
|
} else {
|
|
} else {
|
|
this.modeClass.forEach(mode => {
|
|
this.modeClass.forEach(mode => {
|
|
- buildStyle(type, mode);
|
|
|
|
- });
|
|
|
|
|
|
+ buildStyle(type, mode)
|
|
|
|
+ })
|
|
}
|
|
}
|
|
- return styles;
|
|
|
|
|
|
+ return styles
|
|
},
|
|
},
|
|
// 处理内置组合动画
|
|
// 处理内置组合动画
|
|
tranfromInit(type) {
|
|
tranfromInit(type) {
|
|
let buildTranfrom = (type, mode) => {
|
|
let buildTranfrom = (type, mode) => {
|
|
- let aniNum = null;
|
|
|
|
|
|
+ let aniNum = null
|
|
if (mode === 'fade') {
|
|
if (mode === 'fade') {
|
|
- aniNum = type ? 0 : 1;
|
|
|
|
|
|
+ aniNum = type ? 0 : 1
|
|
} else {
|
|
} else {
|
|
- aniNum = type ? '-100%' : '0';
|
|
|
|
|
|
+ aniNum = type ? '-100%' : '0'
|
|
if (mode === 'zoom-in') {
|
|
if (mode === 'zoom-in') {
|
|
- aniNum = type ? 0.8 : 1;
|
|
|
|
|
|
+ aniNum = type ? 0.8 : 1
|
|
}
|
|
}
|
|
if (mode === 'zoom-out') {
|
|
if (mode === 'zoom-out') {
|
|
- aniNum = type ? 1.2 : 1;
|
|
|
|
|
|
+ aniNum = type ? 1.2 : 1
|
|
}
|
|
}
|
|
if (mode === 'slide-right') {
|
|
if (mode === 'slide-right') {
|
|
- aniNum = type ? '100%' : '0';
|
|
|
|
|
|
+ aniNum = type ? '100%' : '0'
|
|
}
|
|
}
|
|
if (mode === 'slide-bottom') {
|
|
if (mode === 'slide-bottom') {
|
|
- aniNum = type ? '100%' : '0';
|
|
|
|
|
|
+ aniNum = type ? '100%' : '0'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- this.animation[this.animationMode()[mode]](aniNum);
|
|
|
|
- };
|
|
|
|
|
|
+ this.animation[this.animationMode()[mode]](aniNum)
|
|
|
|
+ }
|
|
if (typeof this.modeClass === 'string') {
|
|
if (typeof this.modeClass === 'string') {
|
|
- buildTranfrom(type, this.modeClass);
|
|
|
|
|
|
+ buildTranfrom(type, this.modeClass)
|
|
} else {
|
|
} else {
|
|
this.modeClass.forEach(mode => {
|
|
this.modeClass.forEach(mode => {
|
|
- buildTranfrom(type, mode);
|
|
|
|
- });
|
|
|
|
|
|
+ buildTranfrom(type, mode)
|
|
|
|
+ })
|
|
}
|
|
}
|
|
|
|
|
|
- return this.animation;
|
|
|
|
|
|
+ return this.animation
|
|
},
|
|
},
|
|
animationType(type) {
|
|
animationType(type) {
|
|
return {
|
|
return {
|
|
- fade: type ? 1 : 0,
|
|
|
|
|
|
+ fade: type ? 0 : 1,
|
|
'slide-top': `translateY(${type ? '0' : '-100%'})`,
|
|
'slide-top': `translateY(${type ? '0' : '-100%'})`,
|
|
'slide-right': `translateX(${type ? '0' : '100%'})`,
|
|
'slide-right': `translateX(${type ? '0' : '100%'})`,
|
|
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
|
|
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
|
|
'slide-left': `translateX(${type ? '0' : '-100%'})`,
|
|
'slide-left': `translateX(${type ? '0' : '-100%'})`,
|
|
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
|
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
|
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
|
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
|
- };
|
|
|
|
|
|
+ }
|
|
},
|
|
},
|
|
// 内置动画类型与实际动画对应字典
|
|
// 内置动画类型与实际动画对应字典
|
|
animationMode() {
|
|
animationMode() {
|
|
@@ -286,14 +273,14 @@ export default {
|
|
'slide-left': 'translateX',
|
|
'slide-left': 'translateX',
|
|
'zoom-in': 'scale',
|
|
'zoom-in': 'scale',
|
|
'zoom-out': 'scale'
|
|
'zoom-out': 'scale'
|
|
- };
|
|
|
|
|
|
+ }
|
|
},
|
|
},
|
|
// 驼峰转中横线
|
|
// 驼峰转中横线
|
|
toLine(name) {
|
|
toLine(name) {
|
|
- return name.replace(/([A-Z])/g, '-$1').toLowerCase();
|
|
|
|
|
|
+ return name.replace(/([A-Z])/g, '-$1').toLowerCase()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style></style>
|
|
<style></style>
|