xuechunyuan
2 years ago
commit
c030abbe9a
15 changed files with 1151 additions and 17 deletions
@ -0,0 +1,13 @@ |
||||
{ |
||||
"name": "hello-uniapp", |
||||
"version": "3.4.4", |
||||
"lockfileVersion": 1, |
||||
"requires": true, |
||||
"dependencies": { |
||||
"uview-ui": { |
||||
"version": "2.0.36", |
||||
"resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.36.tgz", |
||||
"integrity": "sha512-ASSZT6M8w3GTO1eFPbsgEFV0U5UujK+8pTNr+MSUbRNcRMC1u63DDTLJVeArV91kWM0bfAexK3SK9pnTqF9TtA==" |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,260 @@ |
||||
<template> |
||||
<view class="process_more"> |
||||
<view class="com_box"> |
||||
<view class="com_txt"> |
||||
顺丰快递 |
||||
</view> |
||||
<view class="com_num"> |
||||
SH189165496411 |
||||
</view> |
||||
</view> |
||||
<!-- 步骤条 --> |
||||
<view class="pro_box"> |
||||
<view class="set-2" :key="index" v-for="(item,index) in options"> |
||||
<view class="img-border"> |
||||
<view class="left_img"></view> |
||||
</view> |
||||
<view v-if='index!=0' class="left_line_up"></view> |
||||
<view v-if='index!=options.length-1' class="left_line_down"></view> |
||||
<view class="set-view"> |
||||
<view :class="index == 0 ? 'active' : ''" class="set-view-test3">{{item.status}}</view> |
||||
<view :class="index == 0 ? 'active' : ''" class="set-view-test4">{{item.context}}</view> |
||||
<view class="set-view-test"> |
||||
<view class="set-view-test2">{{item.time}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
options: [{ |
||||
status: '投柜或驿站', |
||||
context: '【青岛市】 快件已被 菜鸟的【青岛康泰源惠客友超市店】代收，【取件地址：青岛康泰源惠客友超市店】，请及时取件。如有疑问请联系：15805321109，投诉电话：0532-88985563', |
||||
time: '2023-08-18 10:33:33' |
||||
}, |
||||
{ |
||||
status: '派件', |
||||
context: '【青岛市】青岛市中五二部（0532-88985563）业务员【杨金梅,19106394524】正在为您派件（95720为中通快递员外呼专属号码，请放心接听，如有问题可联系投诉电话：0532-88985563）', |
||||
time: '2023-08-18 08:08:38' |
||||
}, |
||||
{ |
||||
status: '在途', |
||||
context: '【青岛市】 快件已到达 青岛市中五二部', |
||||
time: '2023-08-18 08:08:33' |
||||
}, |
||||
{ |
||||
status: '在途', |
||||
context: '【青岛市】 快件已发往 青岛市中五二部', |
||||
time: '2023-08-18 04:36:56' |
||||
}, |
||||
{ |
||||
status: '在途', |
||||
context: '【青岛市】 快件已到达 青岛中转部', |
||||
time: '2023-08-18 01:04:40' |
||||
}, |
||||
{ |
||||
status: '在途', |
||||
context: '【昆明市】 快件已发往 青岛中转部', |
||||
time: '2023-08-16 00:51:30' |
||||
}, |
||||
{ |
||||
status: '在途', |
||||
context: '【昆明市】 快件已到达 昆明中转', |
||||
time: '2023-08-15 15:30:16' |
||||
}, { |
||||
status: '在途', |
||||
context: '【丽江市】 快件已发往 昆明中转', |
||||
time: '2023-08-14 19:02:02' |
||||
}, { |
||||
status: '揽收', |
||||
context: '【丽江市】 【丽江华坪县】（0888-8834031） 的 P1陈平（15108866686） 已揽收', |
||||
time: '2023-08-14 19:01:18' |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.process_more { |
||||
height: 100%; |
||||
overflow-y: hidden; |
||||
|
||||
.com_box { |
||||
width: 690rpx; |
||||
height: 90rpx; |
||||
margin: 0 auto; |
||||
margin-top: 30rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 30rpx 30rpx 30rpx 30rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.com_txt { |
||||
margin-left: 38rpx; |
||||
margin-right: 20rpx; |
||||
font-size: 26rpx; |
||||
color: #333; |
||||
} |
||||
|
||||
.com_num { |
||||
font-size: 26rpx; |
||||
color: #333; |
||||
} |
||||
} |
||||
|
||||
.pro_box { |
||||
width: 690rpx; |
||||
height: 75%; |
||||
overflow-y: auto; |
||||
overflow-x: hidden; |
||||
background: #FFFFFF; |
||||
border-radius: 30rpx 30rpx 30rpx 30rpx; |
||||
margin: 0 auto; |
||||
margin-top: 30rpx; |
||||
padding: 30rpx 0; |
||||
|
||||
.process_text { |
||||
position: relative; |
||||
|
||||
.process_left { |
||||
position: absolute; |
||||
top: 200rpx; |
||||
left: 40rpx; |
||||
|
||||
image { |
||||
width: 44rpx; |
||||
height: 44rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.set-2:last-child::after { |
||||
display: none; |
||||
} |
||||
|
||||
.set-2 { |
||||
border-radius: 10rpx; |
||||
width: 600rpx; |
||||
margin-left: 100rpx; |
||||
margin-top: 60rpx; |
||||
position: relative; |
||||
|
||||
.set-view { |
||||
width: 493rpx; |
||||
|
||||
.set-view-test { |
||||
margin: 0 auto; |
||||
// padding-top: 20rpx; |
||||
padding-bottom: 20rpx; |
||||
|
||||
.set-view-test2 { |
||||
width: 100%; |
||||
height: 26rpx; |
||||
font-family: Gibson; |
||||
font-size: 20rpx; |
||||
color: #999; |
||||
} |
||||
} |
||||
|
||||
.set-view-test3 { |
||||
margin: 0 auto; |
||||
font-size: 26rpx; |
||||
color: #666; |
||||
|
||||
&.active { |
||||
color: #333; |
||||
} |
||||
} |
||||
|
||||
.set-view-test4 { |
||||
margin: 20rpx auto; |
||||
font-size: 22rpx; |
||||
color: #999; |
||||
|
||||
&.active { |
||||
color: #333; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* 普通 */ |
||||
.set-2 .img-border { |
||||
width: 18rpx; |
||||
height: 17rpx; |
||||
background: gray; |
||||
border-radius: 50%; |
||||
position: absolute; |
||||
top: 6%; |
||||
margin-top: -1rpx; |
||||
left: -58rpx; |
||||
z-index: 100; |
||||
} |
||||
|
||||
/* 特殊 */ |
||||
.set-2:nth-of-type(1)>.img-border { |
||||
width: 38rpx; |
||||
height: 38rpx; |
||||
background: #FFCCD8; |
||||
border-radius: 50%; |
||||
position: absolute; |
||||
top: 0%; |
||||
margin-top: -3rpx; |
||||
left: -68rpx; |
||||
z-index: 100; |
||||
} |
||||
|
||||
.set-2:nth-of-type(1) .left_img { |
||||
border-radius: 50%; |
||||
width: 16rpx; |
||||
height: 16rpx; |
||||
background: #FE3666; |
||||
top: 50%; |
||||
margin-top: 13rpx; |
||||
margin-left: 10rpx; |
||||
} |
||||
|
||||
.left_line_up { |
||||
position: absolute; |
||||
top: 0; |
||||
left: -52upx; |
||||
height: 70%; |
||||
margin-top: -22rpx; |
||||
border-style: solid; |
||||
border-left: 1rpx; |
||||
border-color: #ccc; |
||||
} |
||||
|
||||
.left_line_down { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -52upx; |
||||
height: 60%; |
||||
margin-top: 22rpx; |
||||
border-style: solid; |
||||
border-left: 1rpx; |
||||
border-color: #ccc; |
||||
|
||||
} |
||||
|
||||
.set-2:nth-of-type(1) .left_line_down { |
||||
top: 0; |
||||
height: 105%; |
||||
} |
||||
|
||||
.set-2:last-of-type .left_line_up { |
||||
height: 10%; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 569 B |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,20 @@ |
||||
## 1.3.1（2021-11-23） |
||||
- 修复 init 方法初始化问题 |
||||
## 1.3.0（2021-11-19） |
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition) |
||||
## 1.2.1（2021-09-27） |
||||
- 修复 init 方法不生效的 Bug |
||||
## 1.2.0（2021-07-30） |
||||
- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
||||
## 1.1.1（2021-05-12） |
||||
- 新增 示例地址 |
||||
- 修复 示例项目缺少组件的 Bug |
||||
## 1.1.0（2021-04-22） |
||||
- 新增 通过方法自定义动画 |
||||
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式 |
||||
- 优化 动画触发逻辑，使动画更流畅 |
||||
- 优化 支持单独的动画类型 |
||||
- 优化 文档示例 |
||||
## 1.0.2（2021-02-05） |
||||
- 调整为 uni_modules 目录规范 |
||||
@ -0,0 +1,128 @@ |
||||
// 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 |
||||
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,277 @@ |
||||
<template> |
||||
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { createAnimation } from './createAnimation' |
||||
|
||||
/** |
||||
* Transition 过渡动画 |
||||
* @description 简单过渡动画组件 |
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985 |
||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏 |
||||
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型 |
||||
* @value fade 渐隐渐出过渡 |
||||
* @value slide-top 由上至下过渡 |
||||
* @value slide-right 由右至左过渡 |
||||
* @value slide-bottom 由下至上过渡 |
||||
* @value slide-left 由左至右过渡 |
||||
* @value zoom-in 由小到大过渡 |
||||
* @value zoom-out 由大到小过渡 |
||||
* @property {Number} duration 过渡动画持续时间 |
||||
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red` |
||||
*/ |
||||
export default { |
||||
name: 'uniTransition', |
||||
emits:['click','change'], |
||||
props: { |
||||
show: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
modeClass: { |
||||
type: [Array, String], |
||||
default() { |
||||
return 'fade' |
||||
} |
||||
}, |
||||
duration: { |
||||
type: Number, |
||||
default: 300 |
||||
}, |
||||
styles: { |
||||
type: Object, |
||||
default() { |
||||
return {} |
||||
} |
||||
}, |
||||
customClass:{ |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}, |
||||
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: { |
||||
// 生成样式数据 |
||||
stylesObject() { |
||||
let styles = { |
||||
...this.styles, |
||||
'transition-duration': this.duration / 1000 + 's' |
||||
} |
||||
let transform = '' |
||||
for (let i in styles) { |
||||
let line = this.toLine(i) |
||||
transform += line + ':' + styles[i] + ';' |
||||
} |
||||
return transform |
||||
}, |
||||
// 初始化动画条件 |
||||
transformStyles() { |
||||
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject |
||||
} |
||||
}, |
||||
created() { |
||||
// 动画默认配置 |
||||
this.config = { |
||||
duration: this.duration, |
||||
timingFunction: 'ease', |
||||
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() |
||||
this.animation.run() |
||||
this.$emit('change', { |
||||
detail: this.isShow |
||||
}) |
||||
}, 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.modeClass === 'string') { |
||||
buildStyle(type, this.modeClass) |
||||
} else { |
||||
this.modeClass.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.modeClass === 'string') { |
||||
buildTranfrom(type, this.modeClass) |
||||
} else { |
||||
this.modeClass.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> |
||||
|
||||
<style></style> |
||||
@ -0,0 +1,87 @@ |
||||
{ |
||||
"id": "uni-transition", |
||||
"displayName": "uni-transition 过渡动画", |
||||
"version": "1.3.1", |
||||
"description": "元素的简单过渡动画", |
||||
"keywords": [ |
||||
"uni-ui", |
||||
"uniui", |
||||
"动画", |
||||
"过渡", |
||||
"过渡动画" |
||||
], |
||||
"repository": "https://github.com/dcloudio/uni-ui", |
||||
"engines": { |
||||
"HBuilderX": "" |
||||
}, |
||||
"directories": { |
||||
"example": "../../temps/example_temps" |
||||
}, |
||||
"dcloudext": { |
||||
"category": [ |
||||
"前端组件", |
||||
"通用组件" |
||||
], |
||||
"sale": { |
||||
"regular": { |
||||
"price": "0.00" |
||||
}, |
||||
"sourcecode": { |
||||
"price": "0.00" |
||||
} |
||||
}, |
||||
"contact": { |
||||
"qq": "" |
||||
}, |
||||
"declaration": { |
||||
"ads": "无", |
||||
"data": "无", |
||||
"permissions": "无" |
||||
}, |
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
||||
}, |
||||
"uni_modules": { |
||||
"dependencies": ["uni-scss"], |
||||
"encrypt": [], |
||||
"platforms": { |
||||
"cloud": { |
||||
"tcb": "y", |
||||
"aliyun": "y" |
||||
}, |
||||
"client": { |
||||
"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" |
||||
}, |
||||
"Vue": { |
||||
"vue2": "y", |
||||
"vue3": "y" |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
|
||||
|
||||
## Transition 过渡动画 |
||||
> **组件名：uni-transition** |
||||
> 代码块： `uTransition` |
||||
|
||||
|
||||
元素过渡动画 |
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition) |
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||
Loading…
Reference in new issue