cbvirtua 1.0.102 → 1.0.104
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/better-scroll-dev.zip +0 -0
- package/package.json +1 -1
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/.hbuilderx/launch.json +11 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/App.vue +17 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/README.md +13 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/components/xiaolu-tree/code.js +408 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/components/xiaolu-tree/css/icon.css +342 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/components/xiaolu-tree/css/style.scss +119 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/components/xiaolu-tree/search/index.vue +66 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/components/xiaolu-tree/tree.vue +70 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/main.js +11 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/manifest.json +78 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/pages/chooseUser/chooseUser.vue +69 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/pages/chooseUser/data.js +96 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/pages/index/index.vue +122 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/pages.json +25 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/changelog.md +80 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup/i18n/en.json +7 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup/i18n/index.js +8 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json +7 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json +7 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup/keypress.js +45 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup/popup.js +26 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup/uni-popup.uvue +90 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup/uni-popup.vue +496 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js +45 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue +313 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue +143 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue +187 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/package.json +87 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-popup/readme.md +17 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/changelog.md +8 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/index.scss +1 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/package.json +82 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/readme.md +4 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/styles/index.scss +7 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/styles/setting/_border.scss +3 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/styles/setting/_color.scss +66 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/styles/setting/_radius.scss +55 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/styles/setting/_space.scss +56 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/styles/setting/_styles.scss +167 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/styles/setting/_text.scss +24 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/styles/setting/_variables.scss +146 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/styles/tools/functions.scss +19 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/theme.scss +31 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-scss/variables.scss +62 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-transition/changelog.md +22 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-transition/components/uni-transition/createAnimation.js +131 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-transition/components/uni-transition/uni-transition.vue +286 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-transition/package.json +84 -0
- package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-transition/readme.md +11 -0
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
@import './styles/setting/_variables.scss';
|
|
2
|
+
// 间距基础倍数
|
|
3
|
+
$uni-space-root: 2;
|
|
4
|
+
// 边框半径默认值
|
|
5
|
+
$uni-radius-root:5px;
|
|
6
|
+
|
|
7
|
+
// 主色
|
|
8
|
+
$uni-primary: #2979ff;
|
|
9
|
+
$uni-primary-disable:mix(#fff,$uni-primary,50%);
|
|
10
|
+
$uni-primary-light: mix(#fff,$uni-primary,80%);
|
|
11
|
+
|
|
12
|
+
// 辅助色
|
|
13
|
+
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
|
|
14
|
+
$uni-success: #18bc37;
|
|
15
|
+
$uni-success-disable:mix(#fff,$uni-success,50%);
|
|
16
|
+
$uni-success-light: mix(#fff,$uni-success,80%);
|
|
17
|
+
|
|
18
|
+
$uni-warning: #f3a73f;
|
|
19
|
+
$uni-warning-disable:mix(#fff,$uni-warning,50%);
|
|
20
|
+
$uni-warning-light: mix(#fff,$uni-warning,80%);
|
|
21
|
+
|
|
22
|
+
$uni-error: #e43d33;
|
|
23
|
+
$uni-error-disable:mix(#fff,$uni-error,50%);
|
|
24
|
+
$uni-error-light: mix(#fff,$uni-error,80%);
|
|
25
|
+
|
|
26
|
+
$uni-info: #8f939c;
|
|
27
|
+
$uni-info-disable:mix(#fff,$uni-info,50%);
|
|
28
|
+
$uni-info-light: mix(#fff,$uni-info,80%);
|
|
29
|
+
|
|
30
|
+
// 中性色
|
|
31
|
+
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
|
|
32
|
+
$uni-main-color: #3a3a3a; // 主要文字
|
|
33
|
+
$uni-base-color: #6a6a6a; // 常规文字
|
|
34
|
+
$uni-secondary-color: #909399; // 次要文字
|
|
35
|
+
$uni-extra-color: #c7c7c7; // 辅助说明
|
|
36
|
+
|
|
37
|
+
// 边框颜色
|
|
38
|
+
$uni-border-1: #F0F0F0;
|
|
39
|
+
$uni-border-2: #EDEDED;
|
|
40
|
+
$uni-border-3: #DCDCDC;
|
|
41
|
+
$uni-border-4: #B9B9B9;
|
|
42
|
+
|
|
43
|
+
// 常规色
|
|
44
|
+
$uni-black: #000000;
|
|
45
|
+
$uni-white: #ffffff;
|
|
46
|
+
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
|
47
|
+
|
|
48
|
+
// 背景色
|
|
49
|
+
$uni-bg-color: #f7f7f7;
|
|
50
|
+
|
|
51
|
+
/* 水平间距 */
|
|
52
|
+
$uni-spacing-sm: 8px;
|
|
53
|
+
$uni-spacing-base: 15px;
|
|
54
|
+
$uni-spacing-lg: 30px;
|
|
55
|
+
|
|
56
|
+
// 阴影
|
|
57
|
+
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
|
|
58
|
+
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
|
59
|
+
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
|
|
60
|
+
|
|
61
|
+
// 蒙版
|
|
62
|
+
$uni-mask: rgba($color: #000000, $alpha: 0.4);
|
package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-transition/changelog.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
## 1.3.2(2023-05-04)
|
|
2
|
+
- 修复 NVUE 平台报错的问题
|
|
3
|
+
## 1.3.1(2021-11-23)
|
|
4
|
+
- 修复 init 方法初始化问题
|
|
5
|
+
## 1.3.0(2021-11-19)
|
|
6
|
+
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
|
7
|
+
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
|
|
8
|
+
## 1.2.1(2021-09-27)
|
|
9
|
+
- 修复 init 方法不生效的 Bug
|
|
10
|
+
## 1.2.0(2021-07-30)
|
|
11
|
+
- 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
|
12
|
+
## 1.1.1(2021-05-12)
|
|
13
|
+
- 新增 示例地址
|
|
14
|
+
- 修复 示例项目缺少组件的 Bug
|
|
15
|
+
## 1.1.0(2021-04-22)
|
|
16
|
+
- 新增 通过方法自定义动画
|
|
17
|
+
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
|
|
18
|
+
- 优化 动画触发逻辑,使动画更流畅
|
|
19
|
+
- 优化 支持单独的动画类型
|
|
20
|
+
- 优化 文档示例
|
|
21
|
+
## 1.0.2(2021-02-05)
|
|
22
|
+
- 调整为 uni_modules 目录规范
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
// const defaultOption = {
|
|
2
|
+
// duration: 300,
|
|
3
|
+
// timingFunction: 'linear',
|
|
4
|
+
// delay: 0,
|
|
5
|
+
// transformOrigin: '50% 50% 0'
|
|
6
|
+
// }
|
|
7
|
+
// #ifdef APP-NVUE
|
|
8
|
+
const nvueAnimation = uni.requireNativePlugin('animation')
|
|
9
|
+
// #endif
|
|
10
|
+
class MPAnimation {
|
|
11
|
+
constructor(options, _this) {
|
|
12
|
+
this.options = options
|
|
13
|
+
// 在iOS10+QQ小程序平台下,传给原生的对象一定是个普通对象而不是Proxy对象,否则会报parameter should be Object instead of ProxyObject的错误
|
|
14
|
+
this.animation = uni.createAnimation({
|
|
15
|
+
...options
|
|
16
|
+
})
|
|
17
|
+
this.currentStepAnimates = {}
|
|
18
|
+
this.next = 0
|
|
19
|
+
this.$ = _this
|
|
20
|
+
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
_nvuePushAnimates(type, args) {
|
|
24
|
+
let aniObj = this.currentStepAnimates[this.next]
|
|
25
|
+
let styles = {}
|
|
26
|
+
if (!aniObj) {
|
|
27
|
+
styles = {
|
|
28
|
+
styles: {},
|
|
29
|
+
config: {}
|
|
30
|
+
}
|
|
31
|
+
} else {
|
|
32
|
+
styles = aniObj
|
|
33
|
+
}
|
|
34
|
+
if (animateTypes1.includes(type)) {
|
|
35
|
+
if (!styles.styles.transform) {
|
|
36
|
+
styles.styles.transform = ''
|
|
37
|
+
}
|
|
38
|
+
let unit = ''
|
|
39
|
+
if(type === 'rotate'){
|
|
40
|
+
unit = 'deg'
|
|
41
|
+
}
|
|
42
|
+
styles.styles.transform += `${type}(${args+unit}) `
|
|
43
|
+
} else {
|
|
44
|
+
styles.styles[type] = `${args}`
|
|
45
|
+
}
|
|
46
|
+
this.currentStepAnimates[this.next] = styles
|
|
47
|
+
}
|
|
48
|
+
_animateRun(styles = {}, config = {}) {
|
|
49
|
+
let ref = this.$.$refs['ani'].ref
|
|
50
|
+
if (!ref) return
|
|
51
|
+
return new Promise((resolve, reject) => {
|
|
52
|
+
nvueAnimation.transition(ref, {
|
|
53
|
+
styles,
|
|
54
|
+
...config
|
|
55
|
+
}, res => {
|
|
56
|
+
resolve()
|
|
57
|
+
})
|
|
58
|
+
})
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
_nvueNextAnimate(animates, step = 0, fn) {
|
|
62
|
+
let obj = animates[step]
|
|
63
|
+
if (obj) {
|
|
64
|
+
let {
|
|
65
|
+
styles,
|
|
66
|
+
config
|
|
67
|
+
} = obj
|
|
68
|
+
this._animateRun(styles, config).then(() => {
|
|
69
|
+
step += 1
|
|
70
|
+
this._nvueNextAnimate(animates, step, fn)
|
|
71
|
+
})
|
|
72
|
+
} else {
|
|
73
|
+
this.currentStepAnimates = {}
|
|
74
|
+
typeof fn === 'function' && fn()
|
|
75
|
+
this.isEnd = true
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
step(config = {}) {
|
|
80
|
+
// #ifndef APP-NVUE
|
|
81
|
+
this.animation.step(config)
|
|
82
|
+
// #endif
|
|
83
|
+
// #ifdef APP-NVUE
|
|
84
|
+
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
|
|
85
|
+
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
|
|
86
|
+
this.next++
|
|
87
|
+
// #endif
|
|
88
|
+
return this
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
run(fn) {
|
|
92
|
+
// #ifndef APP-NVUE
|
|
93
|
+
this.$.animationData = this.animation.export()
|
|
94
|
+
this.$.timer = setTimeout(() => {
|
|
95
|
+
typeof fn === 'function' && fn()
|
|
96
|
+
}, this.$.durationTime)
|
|
97
|
+
// #endif
|
|
98
|
+
// #ifdef APP-NVUE
|
|
99
|
+
this.isEnd = false
|
|
100
|
+
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
|
|
101
|
+
if(!ref) return
|
|
102
|
+
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
|
|
103
|
+
this.next = 0
|
|
104
|
+
// #endif
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
|
|
110
|
+
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
|
|
111
|
+
'translateZ'
|
|
112
|
+
]
|
|
113
|
+
const animateTypes2 = ['opacity', 'backgroundColor']
|
|
114
|
+
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
|
|
115
|
+
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
|
|
116
|
+
MPAnimation.prototype[type] = function(...args) {
|
|
117
|
+
// #ifndef APP-NVUE
|
|
118
|
+
this.animation[type](...args)
|
|
119
|
+
// #endif
|
|
120
|
+
// #ifdef APP-NVUE
|
|
121
|
+
this._nvuePushAnimates(type, args)
|
|
122
|
+
// #endif
|
|
123
|
+
return this
|
|
124
|
+
}
|
|
125
|
+
})
|
|
126
|
+
|
|
127
|
+
export function createAnimation(option, _this) {
|
|
128
|
+
if(!_this) return
|
|
129
|
+
clearTimeout(_this.timer)
|
|
130
|
+
return new MPAnimation(option, _this)
|
|
131
|
+
}
|
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- #ifndef APP-NVUE -->
|
|
3
|
+
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
|
|
4
|
+
<!-- #endif -->
|
|
5
|
+
<!-- #ifdef APP-NVUE -->
|
|
6
|
+
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
|
|
7
|
+
<!-- #endif -->
|
|
8
|
+
</template>
|
|
9
|
+
|
|
10
|
+
<script>
|
|
11
|
+
import { createAnimation } from './createAnimation'
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Transition 过渡动画
|
|
15
|
+
* @description 简单过渡动画组件
|
|
16
|
+
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
|
17
|
+
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
|
18
|
+
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
|
19
|
+
* @value fade 渐隐渐出过渡
|
|
20
|
+
* @value slide-top 由上至下过渡
|
|
21
|
+
* @value slide-right 由右至左过渡
|
|
22
|
+
* @value slide-bottom 由下至上过渡
|
|
23
|
+
* @value slide-left 由左至右过渡
|
|
24
|
+
* @value zoom-in 由小到大过渡
|
|
25
|
+
* @value zoom-out 由大到小过渡
|
|
26
|
+
* @property {Number} duration 过渡动画持续时间
|
|
27
|
+
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
|
|
28
|
+
*/
|
|
29
|
+
export default {
|
|
30
|
+
name: 'uniTransition',
|
|
31
|
+
emits:['click','change'],
|
|
32
|
+
props: {
|
|
33
|
+
show: {
|
|
34
|
+
type: Boolean,
|
|
35
|
+
default: false
|
|
36
|
+
},
|
|
37
|
+
modeClass: {
|
|
38
|
+
type: [Array, String],
|
|
39
|
+
default() {
|
|
40
|
+
return 'fade'
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
duration: {
|
|
44
|
+
type: Number,
|
|
45
|
+
default: 300
|
|
46
|
+
},
|
|
47
|
+
styles: {
|
|
48
|
+
type: Object,
|
|
49
|
+
default() {
|
|
50
|
+
return {}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
customClass:{
|
|
54
|
+
type: String,
|
|
55
|
+
default: ''
|
|
56
|
+
},
|
|
57
|
+
onceRender:{
|
|
58
|
+
type:Boolean,
|
|
59
|
+
default:false
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
data() {
|
|
63
|
+
return {
|
|
64
|
+
isShow: false,
|
|
65
|
+
transform: '',
|
|
66
|
+
opacity: 1,
|
|
67
|
+
animationData: {},
|
|
68
|
+
durationTime: 300,
|
|
69
|
+
config: {}
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
watch: {
|
|
73
|
+
show: {
|
|
74
|
+
handler(newVal) {
|
|
75
|
+
if (newVal) {
|
|
76
|
+
this.open()
|
|
77
|
+
} else {
|
|
78
|
+
// 避免上来就执行 close,导致动画错乱
|
|
79
|
+
if (this.isShow) {
|
|
80
|
+
this.close()
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
immediate: true
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
computed: {
|
|
88
|
+
// 生成样式数据
|
|
89
|
+
stylesObject() {
|
|
90
|
+
let styles = {
|
|
91
|
+
...this.styles,
|
|
92
|
+
'transition-duration': this.duration / 1000 + 's'
|
|
93
|
+
}
|
|
94
|
+
let transform = ''
|
|
95
|
+
for (let i in styles) {
|
|
96
|
+
let line = this.toLine(i)
|
|
97
|
+
transform += line + ':' + styles[i] + ';'
|
|
98
|
+
}
|
|
99
|
+
return transform
|
|
100
|
+
},
|
|
101
|
+
// 初始化动画条件
|
|
102
|
+
transformStyles() {
|
|
103
|
+
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
created() {
|
|
107
|
+
// 动画默认配置
|
|
108
|
+
this.config = {
|
|
109
|
+
duration: this.duration,
|
|
110
|
+
timingFunction: 'ease',
|
|
111
|
+
transformOrigin: '50% 50%',
|
|
112
|
+
delay: 0
|
|
113
|
+
}
|
|
114
|
+
this.durationTime = this.duration
|
|
115
|
+
},
|
|
116
|
+
methods: {
|
|
117
|
+
/**
|
|
118
|
+
* ref 触发 初始化动画
|
|
119
|
+
*/
|
|
120
|
+
init(obj = {}) {
|
|
121
|
+
if (obj.duration) {
|
|
122
|
+
this.durationTime = obj.duration
|
|
123
|
+
}
|
|
124
|
+
this.animation = createAnimation(Object.assign(this.config, obj),this)
|
|
125
|
+
},
|
|
126
|
+
/**
|
|
127
|
+
* 点击组件触发回调
|
|
128
|
+
*/
|
|
129
|
+
onClick() {
|
|
130
|
+
this.$emit('click', {
|
|
131
|
+
detail: this.isShow
|
|
132
|
+
})
|
|
133
|
+
},
|
|
134
|
+
/**
|
|
135
|
+
* ref 触发 动画分组
|
|
136
|
+
* @param {Object} obj
|
|
137
|
+
*/
|
|
138
|
+
step(obj, config = {}) {
|
|
139
|
+
if (!this.animation) return
|
|
140
|
+
for (let i in obj) {
|
|
141
|
+
try {
|
|
142
|
+
if(typeof obj[i] === 'object'){
|
|
143
|
+
this.animation[i](...obj[i])
|
|
144
|
+
}else{
|
|
145
|
+
this.animation[i](obj[i])
|
|
146
|
+
}
|
|
147
|
+
} catch (e) {
|
|
148
|
+
console.error(`方法 ${i} 不存在`)
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
this.animation.step(config)
|
|
152
|
+
return this
|
|
153
|
+
},
|
|
154
|
+
/**
|
|
155
|
+
* ref 触发 执行动画
|
|
156
|
+
*/
|
|
157
|
+
run(fn) {
|
|
158
|
+
if (!this.animation) return
|
|
159
|
+
this.animation.run(fn)
|
|
160
|
+
},
|
|
161
|
+
// 开始过度动画
|
|
162
|
+
open() {
|
|
163
|
+
clearTimeout(this.timer)
|
|
164
|
+
this.transform = ''
|
|
165
|
+
this.isShow = true
|
|
166
|
+
let { opacity, transform } = this.styleInit(false)
|
|
167
|
+
if (typeof opacity !== 'undefined') {
|
|
168
|
+
this.opacity = opacity
|
|
169
|
+
}
|
|
170
|
+
this.transform = transform
|
|
171
|
+
// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
|
|
172
|
+
this.$nextTick(() => {
|
|
173
|
+
// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
|
|
174
|
+
this.timer = setTimeout(() => {
|
|
175
|
+
this.animation = createAnimation(this.config, this)
|
|
176
|
+
this.tranfromInit(false).step()
|
|
177
|
+
this.animation.run()
|
|
178
|
+
this.$emit('change', {
|
|
179
|
+
detail: this.isShow
|
|
180
|
+
})
|
|
181
|
+
}, 20)
|
|
182
|
+
})
|
|
183
|
+
},
|
|
184
|
+
// 关闭过度动画
|
|
185
|
+
close(type) {
|
|
186
|
+
if (!this.animation) return
|
|
187
|
+
this.tranfromInit(true)
|
|
188
|
+
.step()
|
|
189
|
+
.run(() => {
|
|
190
|
+
this.isShow = false
|
|
191
|
+
this.animationData = null
|
|
192
|
+
this.animation = null
|
|
193
|
+
let { opacity, transform } = this.styleInit(false)
|
|
194
|
+
this.opacity = opacity || 1
|
|
195
|
+
this.transform = transform
|
|
196
|
+
this.$emit('change', {
|
|
197
|
+
detail: this.isShow
|
|
198
|
+
})
|
|
199
|
+
})
|
|
200
|
+
},
|
|
201
|
+
// 处理动画开始前的默认样式
|
|
202
|
+
styleInit(type) {
|
|
203
|
+
let styles = {
|
|
204
|
+
transform: ''
|
|
205
|
+
}
|
|
206
|
+
let buildStyle = (type, mode) => {
|
|
207
|
+
if (mode === 'fade') {
|
|
208
|
+
styles.opacity = this.animationType(type)[mode]
|
|
209
|
+
} else {
|
|
210
|
+
styles.transform += this.animationType(type)[mode] + ' '
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
if (typeof this.modeClass === 'string') {
|
|
214
|
+
buildStyle(type, this.modeClass)
|
|
215
|
+
} else {
|
|
216
|
+
this.modeClass.forEach(mode => {
|
|
217
|
+
buildStyle(type, mode)
|
|
218
|
+
})
|
|
219
|
+
}
|
|
220
|
+
return styles
|
|
221
|
+
},
|
|
222
|
+
// 处理内置组合动画
|
|
223
|
+
tranfromInit(type) {
|
|
224
|
+
let buildTranfrom = (type, mode) => {
|
|
225
|
+
let aniNum = null
|
|
226
|
+
if (mode === 'fade') {
|
|
227
|
+
aniNum = type ? 0 : 1
|
|
228
|
+
} else {
|
|
229
|
+
aniNum = type ? '-100%' : '0'
|
|
230
|
+
if (mode === 'zoom-in') {
|
|
231
|
+
aniNum = type ? 0.8 : 1
|
|
232
|
+
}
|
|
233
|
+
if (mode === 'zoom-out') {
|
|
234
|
+
aniNum = type ? 1.2 : 1
|
|
235
|
+
}
|
|
236
|
+
if (mode === 'slide-right') {
|
|
237
|
+
aniNum = type ? '100%' : '0'
|
|
238
|
+
}
|
|
239
|
+
if (mode === 'slide-bottom') {
|
|
240
|
+
aniNum = type ? '100%' : '0'
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
this.animation[this.animationMode()[mode]](aniNum)
|
|
244
|
+
}
|
|
245
|
+
if (typeof this.modeClass === 'string') {
|
|
246
|
+
buildTranfrom(type, this.modeClass)
|
|
247
|
+
} else {
|
|
248
|
+
this.modeClass.forEach(mode => {
|
|
249
|
+
buildTranfrom(type, mode)
|
|
250
|
+
})
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
return this.animation
|
|
254
|
+
},
|
|
255
|
+
animationType(type) {
|
|
256
|
+
return {
|
|
257
|
+
fade: type ? 1 : 0,
|
|
258
|
+
'slide-top': `translateY(${type ? '0' : '-100%'})`,
|
|
259
|
+
'slide-right': `translateX(${type ? '0' : '100%'})`,
|
|
260
|
+
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
|
|
261
|
+
'slide-left': `translateX(${type ? '0' : '-100%'})`,
|
|
262
|
+
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
|
263
|
+
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
// 内置动画类型与实际动画对应字典
|
|
267
|
+
animationMode() {
|
|
268
|
+
return {
|
|
269
|
+
fade: 'opacity',
|
|
270
|
+
'slide-top': 'translateY',
|
|
271
|
+
'slide-right': 'translateX',
|
|
272
|
+
'slide-bottom': 'translateY',
|
|
273
|
+
'slide-left': 'translateX',
|
|
274
|
+
'zoom-in': 'scale',
|
|
275
|
+
'zoom-out': 'scale'
|
|
276
|
+
}
|
|
277
|
+
},
|
|
278
|
+
// 驼峰转中横线
|
|
279
|
+
toLine(name) {
|
|
280
|
+
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
</script>
|
|
285
|
+
|
|
286
|
+
<style></style>
|
package/xiaolu-tree-plugin-main/xiaolu-tree-plugin-main/uni_modules/uni-transition/package.json
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "uni-transition",
|
|
3
|
+
"displayName": "uni-transition 过渡动画",
|
|
4
|
+
"version": "1.3.2",
|
|
5
|
+
"description": "元素的简单过渡动画",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"uni-ui",
|
|
8
|
+
"uniui",
|
|
9
|
+
"动画",
|
|
10
|
+
"过渡",
|
|
11
|
+
"过渡动画"
|
|
12
|
+
],
|
|
13
|
+
"repository": "https://github.com/dcloudio/uni-ui",
|
|
14
|
+
"engines": {
|
|
15
|
+
"HBuilderX": ""
|
|
16
|
+
},
|
|
17
|
+
"directories": {
|
|
18
|
+
"example": "../../temps/example_temps"
|
|
19
|
+
},
|
|
20
|
+
"dcloudext": {
|
|
21
|
+
"sale": {
|
|
22
|
+
"regular": {
|
|
23
|
+
"price": "0.00"
|
|
24
|
+
},
|
|
25
|
+
"sourcecode": {
|
|
26
|
+
"price": "0.00"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"contact": {
|
|
30
|
+
"qq": ""
|
|
31
|
+
},
|
|
32
|
+
"declaration": {
|
|
33
|
+
"ads": "无",
|
|
34
|
+
"data": "无",
|
|
35
|
+
"permissions": "无"
|
|
36
|
+
},
|
|
37
|
+
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
|
38
|
+
"type": "component-vue"
|
|
39
|
+
},
|
|
40
|
+
"uni_modules": {
|
|
41
|
+
"dependencies": ["uni-scss"],
|
|
42
|
+
"encrypt": [],
|
|
43
|
+
"platforms": {
|
|
44
|
+
"cloud": {
|
|
45
|
+
"tcb": "y",
|
|
46
|
+
"aliyun": "y"
|
|
47
|
+
},
|
|
48
|
+
"client": {
|
|
49
|
+
"App": {
|
|
50
|
+
"app-vue": "y",
|
|
51
|
+
"app-nvue": "y"
|
|
52
|
+
},
|
|
53
|
+
"H5-mobile": {
|
|
54
|
+
"Safari": "y",
|
|
55
|
+
"Android Browser": "y",
|
|
56
|
+
"微信浏览器(Android)": "y",
|
|
57
|
+
"QQ浏览器(Android)": "y"
|
|
58
|
+
},
|
|
59
|
+
"H5-pc": {
|
|
60
|
+
"Chrome": "y",
|
|
61
|
+
"IE": "y",
|
|
62
|
+
"Edge": "y",
|
|
63
|
+
"Firefox": "y",
|
|
64
|
+
"Safari": "y"
|
|
65
|
+
},
|
|
66
|
+
"小程序": {
|
|
67
|
+
"微信": "y",
|
|
68
|
+
"阿里": "y",
|
|
69
|
+
"百度": "y",
|
|
70
|
+
"字节跳动": "y",
|
|
71
|
+
"QQ": "y"
|
|
72
|
+
},
|
|
73
|
+
"快应用": {
|
|
74
|
+
"华为": "u",
|
|
75
|
+
"联盟": "u"
|
|
76
|
+
},
|
|
77
|
+
"Vue": {
|
|
78
|
+
"vue2": "y",
|
|
79
|
+
"vue3": "y"
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|