1

uview-plus/components/u-transition/nvue-ani-map.js

@@ -0,0 +1,68 @@
+export default {
+    fade: {
+        enter: { opacity: 0 },
+        'enter-to': { opacity: 1 },
+        leave: { opacity: 1 },
+        'leave-to': { opacity: 0 }
+    },
+    'fade-up': {
+        enter: { opacity: 0, transform: 'translateY(100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateY(100%)' }
+    },
+    'fade-down': {
+        enter: { opacity: 0, transform: 'translateY(-100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateY(-100%)' }
+    },
+    'fade-left': {
+        enter: { opacity: 0, transform: 'translateX(-100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateX(-100%)' }
+    },
+    'fade-right': {
+        enter: { opacity: 0, transform: 'translateX(100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateX(100%)' }
+    },
+    'slide-up': {
+        enter: { transform: 'translateY(100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateY(100%)' }
+    },
+    'slide-down': {
+        enter: { transform: 'translateY(-100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateY(-100%)' }
+    },
+    'slide-left': {
+        enter: { transform: 'translateX(-100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateX(-100%)' }
+    },
+    'slide-right': {
+        enter: { transform: 'translateX(100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateX(100%)' }
+    },
+    zoom: {
+        enter: { transform: 'scale(0.95)' },
+        'enter-to': { transform: 'scale(1)' },
+        leave: { transform: 'scale(1)' },
+        'leave-to': { transform: 'scale(0.95)' }
+    },
+    'fade-zoom': {
+        enter: { opacity: 0, transform: 'scale(0.95)' },
+        'enter-to': { opacity: 1, transform: 'scale(1)' },
+        leave: { opacity: 1, transform: 'scale(1)' },
+        'leave-to': { opacity: 0, transform: 'scale(0.95)' }
+    }
+}

uview-plus/components/u-transition/props.js

@@ -0,0 +1,26 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 是否展示组件
+        show: {
+            type: Boolean,
+            default: () => defProps.transition.show
+        },
+        // 使用的动画模式
+        mode: {
+            type: String,
+            default: () => defProps.transition.mode
+        },
+        // 动画的执行时间，单位ms
+        duration: {
+            type: [String, Number],
+            default: () => defProps.transition.duration
+        },
+        // 使用的动画过渡函数
+        timingFunction: {
+            type: String,
+            default: () => defProps.transition.timingFunction
+        }
+    }
+})

uview-plus/components/u-transition/transition.js

@@ -0,0 +1,18 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 16:59:00
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/transition.js
+ */
+export default {
+    // transition动画组件的props
+    transition: {
+        show: false,
+        mode: 'fade',
+        duration: '300',
+        timingFunction: 'ease-out'
+    }
+}

uview-plus/components/u-transition/u-transition.vue

@@ -0,0 +1,96 @@
+<template>
+	<view
+		v-if="inited"
+		class="u-transition"
+		ref="u-transition"
+		@tap="clickHandler"
+		:class="classes"
+		:style="[mergeStyle]"
+		@touchmove="noop"
+	>
+		<slot />
+	</view>
+</template>
+
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle } from '../../libs/function/index';
+// 组件的methods方法，由于内容较长，写在外部文件中通过mixin引入
+import transitionMixin from "./transitionMixin.js";
+/**
+ * transition  动画组件
+ * @description
+ * @tutorial
+ * @property {String}			show			是否展示组件 （默认 false ）
+ * @property {String}			mode			使用的动画模式 （默认 'fade' ）
+ * @property {String | Number}	duration		动画的执行时间，单位ms （默认 '300' ）
+ * @property {String}			timingFunction	使用的动画过渡函数 （默认 'ease-out' ）
+ * @property {Object}			customStyle		自定义样式
+ * @event {Function} before-enter	进入前触发
+ * @event {Function} enter			进入中触发
+ * @event {Function} after-enter	进入后触发
+ * @event {Function} before-leave	离开前触发
+ * @event {Function} leave			离开中触发
+ * @event {Function} after-leave	离开后触发
+ * @example
+ */
+export default {
+	name: 'u-transition',
+	data() {
+		return {
+			inited: false, // 是否显示/隐藏组件
+			viewStyle: {}, // 组件内部的样式
+			status: '', // 记录组件动画的状态
+			transitionEnded: false, // 组件是否结束的标记
+			display: false, // 组件是否展示
+			classes: '', // 应用的类名
+		}
+	},
+	emits: ['click', 'beforeEnter', 'enter', 'afterEnter', 'beforeLeave', 'leave', 'afterLeave'],
+	computed: {
+	    mergeStyle() {
+	        const { viewStyle, customStyle } = this
+	        return {
+	            // #ifndef APP-NVUE
+	            transitionDuration: `${this.duration}ms`,
+	            // display: `${this.display ? '' : 'none'}`,
+				transitionTimingFunction: this.timingFunction,
+	            // #endif
+				// 避免自定义样式影响到动画属性，所以写在viewStyle前面
+	            ...addStyle(customStyle),
+	            ...viewStyle
+	        }
+	    }
+	},
+	// 将mixin挂在到组件中，实际上为一个vue格式对象。
+	mixins: [mpMixin, mixin, transitionMixin, props],
+	watch: {
+		show: {
+			handler(newVal) {
+				// vue和nvue分别执行不同的方法
+				// #ifdef APP-NVUE
+				newVal ? this.nvueEnter() : this.nvueLeave()
+				// #endif
+				// #ifndef APP-NVUE
+				newVal ? this.vueEnter() : this.vueLeave()
+				// #endif
+			},
+			// 表示同时监听初始化时的props的show的意思
+			immediate: true
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/components.scss';
+
+/* #ifndef APP-NVUE */
+// vue版本动画相关的样式抽离在外部文件
+@import './vue.ani-style.scss';
+/* #endif */
+
+.u-transition {}
+</style>