补充组件
This commit is contained in:
yanghang
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="course-item-box" @click="clickItem">
|
<view class="course-item-box" @click="clickItem">
|
||||||
<view class="img-box-view">
|
<view class="img-box-view">
|
||||||
<ImagePreview class="img-box"></ImagePreview>
|
<ImagePreview class="img-box" :imgId="itemInfo.imgId"></ImagePreview>
|
||||||
<view class="item-grade">{{itemInfo.evalGrade}}</view>
|
<view class="item-grade">{{itemInfo.evalGrade}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="cont-box">
|
<view class="cont-box">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <image :src="imgUrlShow"></image> -->
|
<image :src="imgUrlShow"></image>
|
||||||
<image class="img" src="@/static/images/test/1.png"></image>
|
<!-- <image class="img" src="@/static/images/test/1.png"></image> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
export default {
|
export default {
|
||||||
name:"image-preview",
|
name:"image-preview",
|
||||||
props:{
|
props:{
|
||||||
modelValue:{
|
imgId:{
|
||||||
default:'',
|
default:'',
|
||||||
type:String
|
type:String
|
||||||
}
|
}
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
modelValue: {
|
imgId: {
|
||||||
handler(newval, oldval) {
|
handler(newval, oldval) {
|
||||||
if (newval) {
|
if (newval) {
|
||||||
this.getPreviewUrlBlob(newval);
|
this.getPreviewUrlBlob(newval);
|
||||||
@@ -40,20 +40,20 @@
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getPreviewUrlBlob(id) {
|
getPreviewUrlBlob(id) {
|
||||||
this.imgUrlShow = '@/static/images/index/message_b.png'
|
// this.imgUrlShow = '@/static/images/index/message_b.png'
|
||||||
// previewFile(id).then((res) => {
|
previewFile(id).then((res) => {
|
||||||
// this.imgUrlShow = URL.createObjectURL(res);
|
this.imgUrlShow = URL.createObjectURL(res);
|
||||||
// // const reader = new FileReader();
|
// const reader = new FileReader();
|
||||||
// // reader.readAsDataURL(res)
|
// reader.readAsDataURL(res)
|
||||||
// // reader.onloadend = () => {
|
// reader.onloadend = () => {
|
||||||
// // this.imgUrlShow = reader.result;
|
// this.imgUrlShow = reader.result;
|
||||||
// // }
|
// }
|
||||||
// });
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.modelValue) {
|
if (this.imgId) {
|
||||||
this.getPreviewUrlBlob(this.modelValue);
|
this.getPreviewUrlBlob(this.imgId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
## 1.0.8（2023-10-18）
|
||||||
|
1. 修复在APP上不能正常显示的BUG
|
||||||
|
## 1.0.7（2023-10-12）
|
||||||
|
1. 修复部分情况，修改某属性自动关闭的BUG
|
||||||
|
## 1.0.6（2023-07-24）
|
||||||
|
1. 优化 nvue模式下增加cellChild参数，是否在list中cell节点下，nvue中cell下建议设置成true
|
||||||
|
## 1.0.5（2023-07-02）
|
||||||
|
修改VUE3模式下可能存在的BUG
|
||||||
|
## 1.0.4（2023-07-02）
|
||||||
|
uv-transition 动画组件，代码重构优化，性能更加友好，增加自定义动画功能。详情参考文档：https://www.uvui.cn/components/transition.html
|
||||||
|
## 1.0.3（2023-06-12）
|
||||||
|
1. 恢复this.$nextTick的使用，经过测试百度等平台无问题
|
||||||
|
## 1.0.2（2023-05-23）
|
||||||
|
1. 百度小程序等平台不支持this.$nextick，修改成延时
|
||||||
|
## 1.0.1（2023-05-16）
|
||||||
|
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||||
|
2. 优化部分功能
|
||||||
|
## 1.0.0（2023-05-10）
|
||||||
|
1. 新增动画组件
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
// const defaultOption = {
|
||||||
|
// duration: 300,
|
||||||
|
// timingFunction: 'linear',
|
||||||
|
// delay: 0,
|
||||||
|
// transformOrigin: '50% 50% 0'
|
||||||
|
// }
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const nvueAnimation = uni.requireNativePlugin('animation')
|
||||||
|
// #endif
|
||||||
|
class MPAnimation {
|
||||||
|
constructor(options, _this) {
|
||||||
|
this.options = options
|
||||||
|
// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
|
||||||
|
this.animation = uni.createAnimation({
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
this.currentStepAnimates = {}
|
||||||
|
this.next = 0
|
||||||
|
this.$ = _this
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_nvuePushAnimates(type, args) {
|
||||||
|
let aniObj = this.currentStepAnimates[this.next]
|
||||||
|
let styles = {}
|
||||||
|
if (!aniObj) {
|
||||||
|
styles = {
|
||||||
|
styles: {},
|
||||||
|
config: {}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
styles = aniObj
|
||||||
|
}
|
||||||
|
if (animateTypes1.includes(type)) {
|
||||||
|
if (!styles.styles.transform) {
|
||||||
|
styles.styles.transform = ''
|
||||||
|
}
|
||||||
|
let unit = ''
|
||||||
|
if(type === 'rotate'){
|
||||||
|
unit = 'deg'
|
||||||
|
}
|
||||||
|
styles.styles.transform += `${type}(${args+unit}) `
|
||||||
|
} else {
|
||||||
|
styles.styles[type] = `${args}`
|
||||||
|
}
|
||||||
|
this.currentStepAnimates[this.next] = styles
|
||||||
|
}
|
||||||
|
_animateRun(styles = {}, config = {}) {
|
||||||
|
let ref = this.$.$refs['ani'].ref
|
||||||
|
if (!ref) return
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
nvueAnimation.transition(ref, {
|
||||||
|
styles,
|
||||||
|
...config
|
||||||
|
}, res => {
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
_nvueNextAnimate(animates, step = 0, fn) {
|
||||||
|
let obj = animates[step]
|
||||||
|
if (obj) {
|
||||||
|
let {
|
||||||
|
styles,
|
||||||
|
config
|
||||||
|
} = obj
|
||||||
|
this._animateRun(styles, config).then(() => {
|
||||||
|
step += 1
|
||||||
|
this._nvueNextAnimate(animates, step, fn)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.currentStepAnimates = {}
|
||||||
|
typeof fn === 'function' && fn()
|
||||||
|
this.isEnd = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
step(config = {}) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.animation.step(config)
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
|
||||||
|
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
|
||||||
|
this.next++
|
||||||
|
// #endif
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
run(fn) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.$.animationData = this.animation.export()
|
||||||
|
this.$.timer = setTimeout(() => {
|
||||||
|
typeof fn === 'function' && fn()
|
||||||
|
}, this.$.durationTime)
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.isEnd = false
|
||||||
|
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
|
||||||
|
if(!ref) return
|
||||||
|
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
|
||||||
|
this.next = 0
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
|
||||||
|
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
|
||||||
|
'translateZ'
|
||||||
|
]
|
||||||
|
const animateTypes2 = ['opacity', 'backgroundColor']
|
||||||
|
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
|
||||||
|
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
|
||||||
|
MPAnimation.prototype[type] = function(...args) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.animation[type](...args)
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this._nvuePushAnimates(type, args)
|
||||||
|
// #endif
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export function createAnimation(option, _this) {
|
||||||
|
if(!_this) return
|
||||||
|
clearTimeout(_this.timer)
|
||||||
|
return new MPAnimation(option, _this)
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 是否展示组件
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 使用的动画模式
|
||||||
|
mode: {
|
||||||
|
type: [Array, String, null],
|
||||||
|
default() {
|
||||||
|
return 'fade'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 动画的执行时间，单位ms
|
||||||
|
duration: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 300
|
||||||
|
},
|
||||||
|
// 使用的动画过渡函数
|
||||||
|
timingFunction: {
|
||||||
|
type: String,
|
||||||
|
default: 'ease-out'
|
||||||
|
},
|
||||||
|
customClass: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
...uni.$uv?.props?.transition
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,320 @@
|
|||||||
|
<template>
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view
|
||||||
|
v-if="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 -->
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||||
|
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||||
|
import { createAnimation } from './createAnimation'
|
||||||
|
/**
|
||||||
|
* transition 动画组件
|
||||||
|
* @description
|
||||||
|
* @tutorial
|
||||||
|
* @property {Boolean} show 控制组件显示或关闭 （默认 false ）
|
||||||
|
* @property {Array | String } mode 内置过渡动画类型 （默认 'fade' ）
|
||||||
|
* @value fade 渐隐渐出过渡
|
||||||
|
* @value slide-top 由上至下过渡
|
||||||
|
* @value slide-bottom 由下至上过渡
|
||||||
|
* @value slide-left 由左至右过渡
|
||||||
|
* @value slide-right 由右至左过渡
|
||||||
|
* @value zoom-in 由小到大过渡
|
||||||
|
* @value zoom-out 由大到小过渡
|
||||||
|
* @property {String | Number} duration 动画的执行时间，单位ms （默认 300 ）
|
||||||
|
* @property {String} timingFunction 使用的动画过渡函数 （默认 'ease-out' ）
|
||||||
|
* @property {Object} customStyle 自定义样式
|
||||||
|
* @property {String} customClass 自定义类名
|
||||||
|
* @event {Function} click 点击组件触发
|
||||||
|
* @event {Function} change 过渡动画结束时触发
|
||||||
|
* @example
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uv-transition',
|
||||||
|
mixins: [mpMixin,mixin],
|
||||||
|
emits:['click','change'],
|
||||||
|
props: {
|
||||||
|
// 是否展示组件
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 使用的动画模式
|
||||||
|
mode: {
|
||||||
|
type: [Array, String, null],
|
||||||
|
default() {
|
||||||
|
return 'fade'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 动画的执行时间，单位ms
|
||||||
|
duration: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 300
|
||||||
|
},
|
||||||
|
// 使用的动画过渡函数
|
||||||
|
timingFunction: {
|
||||||
|
type: String,
|
||||||
|
default: 'ease-out'
|
||||||
|
},
|
||||||
|
customClass: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// nvue模式下 是否直接显示，在uv-list等cell下面使用就需要设置
|
||||||
|
cellChild: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
isShow: false,
|
||||||
|
transform: '',
|
||||||
|
opacity: 1,
|
||||||
|
animationData: {},
|
||||||
|
durationTime: 300,
|
||||||
|
config: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.open();
|
||||||
|
} else {
|
||||||
|
// 避免上来就执行 close,导致动画错乱
|
||||||
|
if (this.isShow) {
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 初始化动画条件
|
||||||
|
transformStyles() {
|
||||||
|
const style = {
|
||||||
|
transform: this.transform,
|
||||||
|
opacity: this.opacity,
|
||||||
|
...this.$uv.addStyle(this.customStyle),
|
||||||
|
'transition-duration': `${this.duration / 1000}s`
|
||||||
|
};
|
||||||
|
return this.$uv.addStyle(style,'string');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 动画默认配置
|
||||||
|
this.config = {
|
||||||
|
duration: this.duration,
|
||||||
|
timingFunction: this.timingFunction,
|
||||||
|
transformOrigin: '50% 50%',
|
||||||
|
delay: 0
|
||||||
|
};
|
||||||
|
this.durationTime = this.duration;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* ref 触发 初始化动画
|
||||||
|
*/
|
||||||
|
init(obj = {}) {
|
||||||
|
if (obj.duration) {
|
||||||
|
this.durationTime = obj.duration;
|
||||||
|
}
|
||||||
|
this.animation = createAnimation(Object.assign(this.config, obj),this);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击组件触发回调
|
||||||
|
*/
|
||||||
|
onClick() {
|
||||||
|
this.$emit('click', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* ref 触发 动画分组
|
||||||
|
* @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} 不存在`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.animation.step(config);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* ref 触发 执行动画
|
||||||
|
*/
|
||||||
|
run(fn) {
|
||||||
|
if (!this.animation) return;
|
||||||
|
this.animation.run(fn);
|
||||||
|
},
|
||||||
|
// 开始过度动画
|
||||||
|
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;
|
||||||
|
// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.animation = createAnimation(this.config, this);
|
||||||
|
this.tranfromInit(false).step();
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
if(this.cellChild) {
|
||||||
|
this.opacity = 1;
|
||||||
|
} else{
|
||||||
|
this.animation.run();
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.animation.run();
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
// #ifdef H5
|
||||||
|
this.opacity = 1;
|
||||||
|
// #endif
|
||||||
|
// #endif
|
||||||
|
this.$emit('change', {
|
||||||
|
detail: this.isShow
|
||||||
|
})
|
||||||
|
// #ifdef H5
|
||||||
|
// #ifdef VUE3
|
||||||
|
this.transform = '';
|
||||||
|
// #endif
|
||||||
|
// #endif
|
||||||
|
}, 20);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 关闭过渡动画
|
||||||
|
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
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 处理动画开始前的默认样式
|
||||||
|
styleInit(type) {
|
||||||
|
let styles = {
|
||||||
|
transform: ''
|
||||||
|
};
|
||||||
|
let buildStyle = (type, mode) => {
|
||||||
|
if (mode === 'fade') {
|
||||||
|
styles.opacity = this.animationType(type)[mode];
|
||||||
|
} else {
|
||||||
|
styles.transform += this.animationType(type)[mode] + ' ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (typeof this.mode === 'string') {
|
||||||
|
buildStyle(type, this.mode);
|
||||||
|
} else {
|
||||||
|
this.mode.forEach(mode => {
|
||||||
|
buildStyle(type, mode)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return styles
|
||||||
|
},
|
||||||
|
// 处理内置组合动画
|
||||||
|
tranfromInit(type) {
|
||||||
|
let buildTranfrom = (type, mode) => {
|
||||||
|
let aniNum = null;
|
||||||
|
if (mode === 'fade') {
|
||||||
|
aniNum = type ? 0 : 1;
|
||||||
|
} else {
|
||||||
|
aniNum = type ? '-100%' : '0';
|
||||||
|
if (mode === 'zoom-in') {
|
||||||
|
aniNum = type ? 0.8 : 1
|
||||||
|
}
|
||||||
|
if (mode === 'zoom-out') {
|
||||||
|
aniNum = type ? 1.2 : 1
|
||||||
|
}
|
||||||
|
if (mode === 'slide-right') {
|
||||||
|
aniNum = type ? '100%' : '0'
|
||||||
|
}
|
||||||
|
if (mode === 'slide-bottom') {
|
||||||
|
aniNum = type ? '100%' : '0'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.animation[this.animationMode()[mode]](aniNum)
|
||||||
|
}
|
||||||
|
if (typeof this.mode === 'string') {
|
||||||
|
buildTranfrom(type, this.mode)
|
||||||
|
} else {
|
||||||
|
this.mode.forEach(mode => {
|
||||||
|
buildTranfrom(type, mode)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return this.animation;
|
||||||
|
},
|
||||||
|
animationType(type) {
|
||||||
|
return {
|
||||||
|
fade: type ? 1 : 0,
|
||||||
|
'slide-top': `translateY(${type ? '0' : '-100%'})`,
|
||||||
|
'slide-right': `translateX(${type ? '0' : '100%'})`,
|
||||||
|
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
|
||||||
|
'slide-left': `translateX(${type ? '0' : '-100%'})`,
|
||||||
|
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
||||||
|
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 内置动画类型与实际动画对应字典
|
||||||
|
animationMode() {
|
||||||
|
return {
|
||||||
|
fade: 'opacity',
|
||||||
|
'slide-top': 'translateY',
|
||||||
|
'slide-right': 'translateX',
|
||||||
|
'slide-bottom': 'translateY',
|
||||||
|
'slide-left': 'translateX',
|
||||||
|
'zoom-in': 'scale',
|
||||||
|
'zoom-out': 'scale'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 驼峰转中横线
|
||||||
|
toLine(name) {
|
||||||
|
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
{
|
||||||
|
"id": "uv-transition",
|
||||||
|
"displayName": "uv-transition 动画 全面兼容vue3+2、app、h5、小程序等多端",
|
||||||
|
"version": "1.0.8",
|
||||||
|
"description": "transition 该组件用于组件的动画过渡效果。",
|
||||||
|
"keywords": [
|
||||||
|
"uv-transition",
|
||||||
|
"uvui",
|
||||||
|
"uv-ui",
|
||||||
|
"transition",
|
||||||
|
"动画"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"type": "component-vue",
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "插件不采集任何数据",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uv-ui-tools"
|
||||||
|
],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y",
|
||||||
|
"钉钉": "u",
|
||||||
|
"快手": "u",
|
||||||
|
"飞书": "u",
|
||||||
|
"京东": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
## Transition 动画
|
||||||
|
|
||||||
|
> **组件名：uv-transition**
|
||||||
|
|
||||||
|
该组件用于组件的动画过渡效果，支持自定义动画，开箱即用。
|
||||||
|
|
||||||
|
# <a href="https://www.uvui.cn/components/transition.html" target="_blank">查看文档</a>
|
||||||
|
|
||||||
|
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||||
|
|
||||||
|
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||||
Reference in New Issue
Block a user