From 38430ddb8612fce15a2f1c940f9bd57d4da3e70b Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期四, 16 九月 2021 11:59:39 +0800
Subject: [PATCH] add new key
---
components/uni-transition/uni-transition.vue | 500 +++++++++++++++++++++++++++---------------------------
1 files changed, 250 insertions(+), 250 deletions(-)
diff --git a/components/uni-transition/uni-transition.vue b/components/uni-transition/uni-transition.vue
index a0e0781..908a939 100644
--- a/components/uni-transition/uni-transition.vue
+++ b/components/uni-transition/uni-transition.vue
@@ -1,19 +1,19 @@
-<template>
- <view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
- @click="change">
- <slot></slot>
- </view>
-</template>
-
-<script>
+<template>
+ <view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
+ @click="change">
+ <slot></slot>
+ </view>
+</template>
+
+<script>
// #ifdef APP-NVUE
- const animation = uni.requireNativePlugin('animation');
+ const animation = uni.requireNativePlugin('animation');
// #endif
/**
* Transition 杩囨浮鍔ㄧ敾
* @description 绠�鍗曡繃娓″姩鐢荤粍浠�
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
- * @property {Boolean} show = [false|true] 鎺у埗缁勪欢鏄剧ず鎴栭殣钘�
+ * @property {Boolean} show = [false|true] 鎺у埗缁勪欢鏄剧ず鎴栭殣钘�
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 杩囨浮鍔ㄧ敾绫诲瀷
* @value fade 娓愰殣娓愬嚭杩囨浮
* @value slide-top 鐢变笂鑷充笅杩囨浮
@@ -24,256 +24,256 @@
* @value zoom-out 鐢卞ぇ鍒板皬杩囨浮
* @property {Number} duration 杩囨浮鍔ㄧ敾鎸佺画鏃堕棿
* @property {Object} styles 缁勪欢鏍峰紡锛屽悓 css 鏍峰紡锛屾敞鎰忓甫鈥�-鈥樿繛鎺ョ鐨勫睘鎬ч渶瑕佷娇鐢ㄥ皬椹煎嘲鍐欐硶濡傦細`backgroundColor:red`
- */
- export default {
- name: 'uniTransition',
- props: {
- show: {
- type: Boolean,
- default: false
- },
- modeClass: {
- type: Array,
- default () {
- return []
- }
- },
- duration: {
- type: Number,
- default: 300
- },
- styles: {
- type: Object,
+ */
+ export default {
+ name: 'uniTransition',
+ props: {
+ show: {
+ type: Boolean,
+ default: false
+ },
+ modeClass: {
+ type: Array,
default () {
- return {}
- }
- }
- },
- data() {
- return {
- isShow: false,
- transform: '',
- ani: { in: '',
- active: ''
- }
- };
- },
- watch: {
- show: {
- handler(newVal) {
- if (newVal) {
- this.open()
- } else {
- this.close()
- }
- },
- immediate: true
- }
- },
- computed: {
+ return []
+ }
+ },
+ duration: {
+ type: Number,
+ default: 300
+ },
+ styles: {
+ type: Object,
+ default () {
+ return {}
+ }
+ }
+ },
+ data() {
+ return {
+ isShow: false,
+ transform: '',
+ ani: { in: '',
+ active: ''
+ }
+ };
+ },
+ watch: {
+ show: {
+ handler(newVal) {
+ if (newVal) {
+ this.open()
+ } else {
+ this.close()
+ }
+ },
+ immediate: true
+ }
+ },
+ computed: {
stylesObject() {
- let styles = {
- ...this.styles,
- 'transition-duration': this.duration / 1000 + 's'
+ let styles = {
+ ...this.styles,
+ 'transition-duration': this.duration / 1000 + 's'
}
- let transfrom = ''
+ let transfrom = ''
for (let i in styles) {
- let line = this.toLine(i)
- transfrom += line + ':' + styles[i] + ';'
+ let line = this.toLine(i)
+ transfrom += line + ':' + styles[i] + ';'
}
- return transfrom
- }
- },
- created() {
- // this.timer = null
- // this.nextTick = (time = 50) => new Promise(resolve => {
- // clearTimeout(this.timer)
- // this.timer = setTimeout(resolve, time)
- // return this.timer
- // });
- },
- methods: {
- change() {
- this.$emit('click', {
- detail: this.isShow
- })
- },
+ return transfrom
+ }
+ },
+ created() {
+ // this.timer = null
+ // this.nextTick = (time = 50) => new Promise(resolve => {
+ // clearTimeout(this.timer)
+ // this.timer = setTimeout(resolve, time)
+ // return this.timer
+ // });
+ },
+ methods: {
+ change() {
+ this.$emit('click', {
+ detail: this.isShow
+ })
+ },
open() {
- clearTimeout(this.timer)
- this.isShow = true
- this.transform = ''
- this.ani.in = ''
- for (let i in this.getTranfrom(false)) {
- if (i === 'opacity') {
- this.ani.in = 'fade-in'
- } else {
- this.transform += `${this.getTranfrom(false)[i]} `
- }
- }
- this.$nextTick(() => {
- setTimeout(() => {
- this._animation(true)
- }, 50)
- })
-
- },
+ clearTimeout(this.timer)
+ this.isShow = true
+ this.transform = ''
+ this.ani.in = ''
+ for (let i in this.getTranfrom(false)) {
+ if (i === 'opacity') {
+ this.ani.in = 'fade-in'
+ } else {
+ this.transform += `${this.getTranfrom(false)[i]} `
+ }
+ }
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this._animation(true)
+ }, 50)
+ })
+
+ },
close(type) {
- clearTimeout(this.timer)
- this._animation(false)
- },
- _animation(type) {
- let styles = this.getTranfrom(type)
+ clearTimeout(this.timer)
+ this._animation(false)
+ },
+ _animation(type) {
+ let styles = this.getTranfrom(type)
// #ifdef APP-NVUE
- if(!this.$refs['ani']) return
- animation.transition(this.$refs['ani'].ref, {
- styles,
- duration: this.duration, //ms
- timingFunction: 'ease',
- needLayout: false,
- delay: 0 //ms
- }, () => {
- if (!type) {
- this.isShow = false
- }
- this.$emit('change', {
- detail: this.isShow
- })
- })
- // #endif
- // #ifndef APP-NVUE
- this.transform = ''
- for (let i in styles) {
- if (i === 'opacity') {
- this.ani.in = `fade-${type?'out':'in'}`
- } else {
- this.transform += `${styles[i]} `
- }
- }
- this.timer = setTimeout(() => {
- if (!type) {
- this.isShow = false
- }
- this.$emit('change', {
- detail: this.isShow
- })
-
- }, this.duration)
- // #endif
-
- },
- getTranfrom(type) {
- let styles = {
- transform: ''
- }
- this.modeClass.forEach((mode) => {
- switch (mode) {
- case 'fade':
- styles.opacity = type ? 1 : 0
- break;
- case 'slide-top':
- styles.transform += `translateY(${type?'0':'-100%'}) `
- break;
- case 'slide-right':
- styles.transform += `translateX(${type?'0':'100%'}) `
- break;
- case 'slide-bottom':
- styles.transform += `translateY(${type?'0':'100%'}) `
- break;
- case 'slide-left':
- styles.transform += `translateX(${type?'0':'-100%'}) `
- break;
- case 'zoom-in':
- styles.transform += `scale(${type?1:0.8}) `
- break;
- case 'zoom-out':
- styles.transform += `scale(${type?1:1.2}) `
- break;
- }
- })
- return styles
- },
- _modeClassArr(type) {
- let mode = this.modeClass
- if (typeof(mode) !== "string") {
- let modestr = ''
- mode.forEach((item) => {
- modestr += (item + '-' + type + ',')
- })
- return modestr.substr(0, modestr.length - 1)
- } else {
- return mode + '-' + type
- }
- },
+ if(!this.$refs['ani']) return
+ animation.transition(this.$refs['ani'].ref, {
+ styles,
+ duration: this.duration, //ms
+ timingFunction: 'ease',
+ needLayout: false,
+ delay: 0 //ms
+ }, () => {
+ if (!type) {
+ this.isShow = false
+ }
+ this.$emit('change', {
+ detail: this.isShow
+ })
+ })
+ // #endif
+ // #ifndef APP-NVUE
+ this.transform = ''
+ for (let i in styles) {
+ if (i === 'opacity') {
+ this.ani.in = `fade-${type?'out':'in'}`
+ } else {
+ this.transform += `${styles[i]} `
+ }
+ }
+ this.timer = setTimeout(() => {
+ if (!type) {
+ this.isShow = false
+ }
+ this.$emit('change', {
+ detail: this.isShow
+ })
+
+ }, this.duration)
+ // #endif
+
+ },
+ getTranfrom(type) {
+ let styles = {
+ transform: ''
+ }
+ this.modeClass.forEach((mode) => {
+ switch (mode) {
+ case 'fade':
+ styles.opacity = type ? 1 : 0
+ break;
+ case 'slide-top':
+ styles.transform += `translateY(${type?'0':'-100%'}) `
+ break;
+ case 'slide-right':
+ styles.transform += `translateX(${type?'0':'100%'}) `
+ break;
+ case 'slide-bottom':
+ styles.transform += `translateY(${type?'0':'100%'}) `
+ break;
+ case 'slide-left':
+ styles.transform += `translateX(${type?'0':'-100%'}) `
+ break;
+ case 'zoom-in':
+ styles.transform += `scale(${type?1:0.8}) `
+ break;
+ case 'zoom-out':
+ styles.transform += `scale(${type?1:1.2}) `
+ break;
+ }
+ })
+ return styles
+ },
+ _modeClassArr(type) {
+ let mode = this.modeClass
+ if (typeof(mode) !== "string") {
+ let modestr = ''
+ mode.forEach((item) => {
+ modestr += (item + '-' + type + ',')
+ })
+ return modestr.substr(0, modestr.length - 1)
+ } else {
+ return mode + '-' + type
+ }
+ },
// getEl(el) {
- // console.log(el || el.ref || null);
- // return el || el.ref || null
+ // console.log(el || el.ref || null);
+ // return el || el.ref || null
// },
toLine(name) {
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
- }
- }
- }
-</script>
-
-<style>
- .uni-transition {
- transition-timing-function: ease;
- transition-duration: 0.3s;
- transition-property: transform, opacity;
- }
-
- .fade-in {
- opacity: 0;
- }
-
- .fade-active {
- opacity: 1;
- }
-
- .slide-top-in {
- /* transition-property: transform, opacity; */
- transform: translateY(-100%);
- }
-
- .slide-top-active {
- transform: translateY(0);
- /* opacity: 1; */
- }
-
- .slide-right-in {
- transform: translateX(100%);
- }
-
- .slide-right-active {
- transform: translateX(0);
- }
-
- .slide-bottom-in {
- transform: translateY(100%);
- }
-
- .slide-bottom-active {
- transform: translateY(0);
- }
-
- .slide-left-in {
- transform: translateX(-100%);
- }
-
- .slide-left-active {
- transform: translateX(0);
- opacity: 1;
- }
-
- .zoom-in-in {
- transform: scale(0.8);
- }
-
- .zoom-out-active {
- transform: scale(1);
- }
-
- .zoom-out-in {
- transform: scale(1.2);
- }
+ }
+ }
+ }
+</script>
+
+<style>
+ .uni-transition {
+ transition-timing-function: ease;
+ transition-duration: 0.3s;
+ transition-property: transform, opacity;
+ }
+
+ .fade-in {
+ opacity: 0;
+ }
+
+ .fade-active {
+ opacity: 1;
+ }
+
+ .slide-top-in {
+ /* transition-property: transform, opacity; */
+ transform: translateY(-100%);
+ }
+
+ .slide-top-active {
+ transform: translateY(0);
+ /* opacity: 1; */
+ }
+
+ .slide-right-in {
+ transform: translateX(100%);
+ }
+
+ .slide-right-active {
+ transform: translateX(0);
+ }
+
+ .slide-bottom-in {
+ transform: translateY(100%);
+ }
+
+ .slide-bottom-active {
+ transform: translateY(0);
+ }
+
+ .slide-left-in {
+ transform: translateX(-100%);
+ }
+
+ .slide-left-active {
+ transform: translateX(0);
+ opacity: 1;
+ }
+
+ .zoom-in-in {
+ transform: scale(0.8);
+ }
+
+ .zoom-out-active {
+ transform: scale(1);
+ }
+
+ .zoom-out-in {
+ transform: scale(1.2);
+ }
</style>
--
Gitblit v1.8.0