From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-transition/transition.js | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 157 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-transition/transition.js b/minipro_standard/uni_modules/uview-ui/components/u-transition/transition.js
index e69de29..92e5681 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-transition/transition.js
+++ b/minipro_standard/uni_modules/uview-ui/components/u-transition/transition.js
@@ -0,0 +1,157 @@
+// 瀹氫箟涓�涓竴瀹氭椂闂村悗鑷姩鎴愬姛鐨刾romise锛岃璋冪敤nextTick鏂规硶澶勶紝杩涘叆涓嬩竴涓猼hen鏂规硶
+const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
+// nvue鍔ㄧ敾妯″潡瀹炵幇缁嗚妭鎶界鍦ㄥ閮ㄦ枃浠�
+import animationMap from './nvue.ani-map.js'
+
+// #ifndef APP-NVUE
+// 瀹氫箟绫诲悕锛岄�氳繃缁欏厓绱犲姩鎬佸垏鎹㈢被鍚嶏紝璧嬩簣鍏冪礌涓�瀹氱殑css鍔ㄧ敾鏍峰紡
+const getClassNames = (name) => ({
+ enter: `u-${name}-enter u-${name}-enter-active`,
+ 'enter-to': `u-${name}-enter-to u-${name}-enter-active`,
+ leave: `u-${name}-leave u-${name}-leave-active`,
+ 'leave-to': `u-${name}-leave-to u-${name}-leave-active`
+})
+// #endif
+
+// #ifdef APP-NVUE
+// 寮曞叆nvue(weex)鐨刟nimation鍔ㄧ敾妯″潡锛屾枃妗ｈ锛�
+// https://weex.apache.org/zh/docs/modules/animation.html#transition
+const animation = uni.requireNativePlugin('animation')
+const getStyle = (name) => animationMap[name]
+// #endif
+
+export default {
+ methods: {
+ // 缁勪欢琚偣鍑诲彂鍑轰簨浠�
+ clickHandler() {
+ this.$emit('click')
+ },
+ // #ifndef APP-NVUE
+ // vue鐗堟湰鐨勭粍浠惰繘鍦哄鐞�
+ vueEnter() {
+ // 鍔ㄧ敾杩涘叆鏃剁殑绫诲悕
+ const classNames = getClassNames(this.mode)
+ // 瀹氫箟鐘舵�佸拰鍙戝嚭鍔ㄧ敾杩涘叆鍓嶄簨浠�
+ this.status = 'enter'
+ this.$emit('beforeEnter')
+ this.inited = true
+ this.display = true
+ this.classes = classNames.enter
+ this.$nextTick(async () => {
+ // #ifdef H5
+ await uni.$u.sleep(20)
+ // #endif
+ // 鏍囪瘑鍔ㄧ敾灏氭湭缁撴潫
+ this.$emit('enter')
+ this.transitionEnded = false
+ // 缁勪欢鍔ㄧ敾杩涘叆鍚庤Е鍙戠殑浜嬩欢
+ this.$emit('afterEnter')
+ // 璧嬩簣缁勪欢enter-to绫诲悕
+ this.classes = classNames['enter-to']
+ })
+ },
+ // 鍔ㄧ敾绂诲満澶勭悊
+ vueLeave() {
+ // 濡傛灉涓嶆槸灞曠ず鐘舵�侊紝鏃犻渶鎵ц閫昏緫
+ if (!this.display) return
+ const classNames = getClassNames(this.mode)
+ // 鏍囪绂诲紑鐘舵�佸拰鍙戝嚭浜嬩欢
+ this.status = 'leave'
+ this.$emit('beforeLeave')
+ // 鑾峰緱绫诲悕
+ this.classes = classNames.leave
+
+ this.$nextTick(() => {
+ // 鍔ㄧ敾姝ｅ湪绂诲満鐨勭姸鎬�
+ this.transitionEnded = false
+ this.$emit('leave')
+ // 缁勪欢鎵ц鍔ㄧ敾锛屽埌浜嗘墽琛岀殑鎵ц鏃堕棿鍚庯紝鎵ц涓�浜涢澶栧鐞�
+ setTimeout(this.onTransitionEnd, this.duration)
+ this.classes = classNames['leave-to']
+ })
+ },
+ // #endif
+ // #ifdef APP-NVUE
+ // nvue鐗堟湰鍔ㄧ敾杩涘満
+ nvueEnter() {
+ // 鑾峰緱鏍峰紡鐨勫悕绉�
+ const currentStyle = getStyle(this.mode)
+ // 缁勪欢鍔ㄧ敾鐘舵�佸拰鍙戝嚭浜嬩欢
+ this.status = 'enter'
+ this.$emit('beforeEnter')
+ // 灞曠ず鐢熸垚缁勪欢鍏冪礌
+ this.inited = true
+ this.display = true
+ // 鍦╪vue瀹夊崜涓婏紝鐢变簬娓叉煋閫熷害鎱紝鍦ㄥ脊绐楋紝閿洏锛屾棩鍘嗙瓑缁勪欢涓紝娓叉煋鍏朵腑鐨勫唴瀹归渶瑕佹椂闂�
+ // 瀵艰嚧鍑虹幇寮圭獥鍗￠】锛岃繖閲岃鍏朵竴寮�濮嬩负閫忔槑鐘舵�侊紝绛変竴瀹氭椂闂存覆鏌撳畬鎴愬悗锛屽啀璁╁叾闅愯棌璧锋潵锛屽啀璁╁叾鎸夋甯搁�昏緫鍑虹幇
+ this.viewStyle = {
+ opacity: 0
+ }
+ // 绛夊緟寮圭獥鍐呭娓叉煋瀹屾垚
+ this.$nextTick(() => {
+ // 鍚堝苟鏍峰紡
+ this.viewStyle = currentStyle.enter
+ Promise.resolve()
+ .then(nextTick)
+ .then(() => {
+ // 缁勪欢寮�濮嬭繘鍏ュ墠鐨勪簨浠�
+ this.$emit('enter')
+ // nvue鐨則ransition鍔ㄧ敾妯″潡闇�瑕侀�氳繃ref璋冪敤缁勪欢锛屾敞鎰忔澶勭殑ref涓嶅悓浜巚ue鐨則his.$refs['u-transition']鐢ㄦ硶
+ animation.transition(this.$refs['u-transition'].ref, {
+ styles: currentStyle['enter-to'],
+ duration: this.duration,
+ timingFunction: this.timingFunction,
+ needLayout: false,
+ delay: 0
+ }, () => {
+ // 鍔ㄧ敾鎵ц瀹屾瘯锛屽彂鍑轰簨浠�
+ this.$emit('afterEnter')
+ })
+ })
+ .catch(() => {})
+ })
+ },
+ nvueLeave() {
+ if (!this.display) {
+ return
+ }
+ const currentStyle = getStyle(this.mode)
+ // 瀹氫箟鐘舵�佸拰浜嬩欢
+ this.status = 'leave'
+ this.$emit('beforeLeave')
+ // 鍚堝苟鏍峰紡
+ this.viewStyle = currentStyle.leave
+ // 鏀惧埌promise涓鐞嗘墽琛岃繃绋�
+ Promise.resolve()
+ .then(nextTick) // 绛夊緟鍑犲崄ms
+ .then(() => {
+ this.transitionEnded = false
+ // 鍔ㄧ敾姝ｅ湪绂诲満鐨勭姸鎬�
+ this.$emit('leave')
+ animation.transition(this.$refs['u-transition'].ref, {
+ styles: currentStyle['leave-to'],
+ duration: this.duration,
+ timingFunction: this.timingFunction,
+ needLayout: false,
+ delay: 0
+ }, () => {
+ this.onTransitionEnd()
+ })
+ })
+ .catch(() => {})
+ },
+ // #endif
+ // 瀹屾垚杩囨浮鍚庤Е鍙�
+ onTransitionEnd() {
+ // 濡傛灉宸茬粡鏄粨鏉熺殑鐘舵�侊紝鏃犻渶鍐嶅鐞�
+ if (this.transitionEnded) return
+ this.transitionEnded = true
+ // 鍙戝嚭缁勪欢鍔ㄧ敾鎵ц鍚庣殑浜嬩欢
+ this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter')
+ if (!this.show && this.display) {
+ this.display = false
+ this.inited = false
+ }
+ }
+ }
+}
--
Gitblit v1.9.3