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