first commit

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-transition/props.js

@@ -0,0 +1,27 @@
+"use strict";
+const uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
+const props = {
+  props: {
+    // 是否展示组件
+    show: {
+      type: Boolean,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.transition.show
+    },
+    // 使用的动画模式
+    mode: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.transition.mode
+    },
+    // 动画的执行时间，单位ms
+    duration: {
+      type: [String, Number],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.transition.duration
+    },
+    // 使用的动画过渡函数
+    timingFunction: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.transition.timingFunction
+    }
+  }
+};
+exports.props = props;

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-transition/transition.js

@@ -0,0 +1,62 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
+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`
+});
+const transition = {
+  methods: {
+    // 组件被点击发出事件
+    clickHandler() {
+      this.$emit("click");
+    },
+    // vue版本的组件进场处理
+    async vueEnter() {
+      const classNames = getClassNames(this.mode);
+      this.status = "enter";
+      this.$emit("beforeEnter");
+      this.inited = true;
+      this.display = true;
+      this.classes = classNames.enter;
+      await common_vendor.nextTick$1();
+      {
+        await uni_modules_uviewPlus_libs_function_index.sleep(20);
+        this.$emit("enter");
+        this.transitionEnded = false;
+        this.$emit("afterEnter");
+        this.classes = classNames["enter-to"];
+      }
+    },
+    // 动画离场处理
+    async vueLeave() {
+      if (!this.display)
+        return;
+      const classNames = getClassNames(this.mode);
+      this.status = "leave";
+      this.$emit("beforeLeave");
+      this.classes = classNames.leave;
+      await common_vendor.nextTick$1();
+      {
+        this.transitionEnded = false;
+        this.$emit("leave");
+        setTimeout(this.onTransitionEnd, this.duration);
+        this.classes = classNames["leave-to"];
+      }
+    },
+    // 完成过渡后触发
+    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;
+      }
+    }
+  }
+};
+exports.transition = transition;

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-transition/u-transition.acss

@@ -0,0 +1,112 @@
+.u-empty.data-v-5cec8177,
+.u-empty__wrap.data-v-5cec8177,
+.u-tabs.data-v-5cec8177,
+.u-tabs__wrapper.data-v-5cec8177,
+.u-tabs__wrapper__scroll-view-wrapper.data-v-5cec8177,
+.u-tabs__wrapper__scroll-view.data-v-5cec8177,
+.u-tabs__wrapper__nav.data-v-5cec8177,
+.u-tabs__wrapper__nav__line.data-v-5cec8177 {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+
+/**
+ * vue版本动画内置的动画模式有如下：
+ * fade：淡入
+ * zoom：缩放
+ * fade-zoom：缩放淡入
+ * fade-up：上滑淡入
+ * fade-down：下滑淡入
+ * fade-left：左滑淡入
+ * fade-right：右滑淡入
+ * slide-up：上滑进入
+ * slide-down：下滑进入
+ * slide-left：左滑进入
+ * slide-right：右滑进入
+ */
+.u-fade-enter-active.data-v-5cec8177,
+.u-fade-leave-active.data-v-5cec8177 {
+  transition-property: opacity;
+}
+.u-fade-enter.data-v-5cec8177,
+.u-fade-leave-to.data-v-5cec8177 {
+  opacity: 0;
+}
+.u-fade-zoom-enter.data-v-5cec8177,
+.u-fade-zoom-leave-to.data-v-5cec8177 {
+  transform: scale(0.95);
+  opacity: 0;
+}
+.u-fade-zoom-enter-active.data-v-5cec8177,
+.u-fade-zoom-leave-active.data-v-5cec8177 {
+  transition-property: transform, opacity;
+}
+.u-fade-down-enter-active.data-v-5cec8177,
+.u-fade-down-leave-active.data-v-5cec8177,
+.u-fade-left-enter-active.data-v-5cec8177,
+.u-fade-left-leave-active.data-v-5cec8177,
+.u-fade-right-enter-active.data-v-5cec8177,
+.u-fade-right-leave-active.data-v-5cec8177,
+.u-fade-up-enter-active.data-v-5cec8177,
+.u-fade-up-leave-active.data-v-5cec8177 {
+  transition-property: opacity, transform;
+}
+.u-fade-up-enter.data-v-5cec8177,
+.u-fade-up-leave-to.data-v-5cec8177 {
+  transform: translate3d(0, 100%, 0);
+  opacity: 0;
+}
+.u-fade-down-enter.data-v-5cec8177,
+.u-fade-down-leave-to.data-v-5cec8177 {
+  transform: translate3d(0, -100%, 0);
+  opacity: 0;
+}
+.u-fade-left-enter.data-v-5cec8177,
+.u-fade-left-leave-to.data-v-5cec8177 {
+  transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+.u-fade-right-enter.data-v-5cec8177,
+.u-fade-right-leave-to.data-v-5cec8177 {
+  transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
+.u-slide-down-enter-active.data-v-5cec8177,
+.u-slide-down-leave-active.data-v-5cec8177,
+.u-slide-left-enter-active.data-v-5cec8177,
+.u-slide-left-leave-active.data-v-5cec8177,
+.u-slide-right-enter-active.data-v-5cec8177,
+.u-slide-right-leave-active.data-v-5cec8177,
+.u-slide-up-enter-active.data-v-5cec8177,
+.u-slide-up-leave-active.data-v-5cec8177 {
+  transition-property: transform;
+}
+.u-slide-up-enter.data-v-5cec8177,
+.u-slide-up-leave-to.data-v-5cec8177 {
+  transform: translate3d(0, 100%, 0);
+}
+.u-slide-down-enter.data-v-5cec8177,
+.u-slide-down-leave-to.data-v-5cec8177 {
+  transform: translate3d(0, -100%, 0);
+}
+.u-slide-left-enter.data-v-5cec8177,
+.u-slide-left-leave-to.data-v-5cec8177 {
+  transform: translate3d(-100%, 0, 0);
+}
+.u-slide-right-enter.data-v-5cec8177,
+.u-slide-right-leave-to.data-v-5cec8177 {
+  transform: translate3d(100%, 0, 0);
+}
+.u-zoom-enter-active.data-v-5cec8177,
+.u-zoom-leave-active.data-v-5cec8177 {
+  transition-property: transform;
+}
+.u-zoom-enter.data-v-5cec8177,
+.u-zoom-leave-to.data-v-5cec8177 {
+  transform: scale(0.95);
+}

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-transition/u-transition.axml

@@ -0,0 +1 @@
+<view a:if="{{a}}" ref="u-transition" onTap="{{b}}" class="{{('u-transition') + ' ' + 'data-v-5cec8177' + ' ' + c}}" style="{{d}}" onTouchMove="{{e}}"><slot/></view>

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-transition/u-transition.js

@@ -0,0 +1,63 @@
+"use strict";
+const uni_modules_uviewPlus_components_uTransition_props = require("./props.js");
+const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
+const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
+const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
+const uni_modules_uviewPlus_components_uTransition_transition = require("./transition.js");
+const common_vendor = require("../../../../common/vendor.js");
+const _sfc_main = {
+  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 {
+        transitionDuration: `${this.duration}ms`,
+        // display: `${this.display ? '' : 'none'}`,
+        transitionTimingFunction: this.timingFunction,
+        // 避免自定义样式影响到动画属性，所以写在viewStyle前面
+        ...uni_modules_uviewPlus_libs_function_index.addStyle(customStyle),
+        ...viewStyle
+      };
+    }
+  },
+  // 将mixin挂在到组件中，实际上为一个vue格式对象。
+  mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uTransition_transition.transition, uni_modules_uviewPlus_components_uTransition_props.props],
+  watch: {
+    show: {
+      handler(newVal) {
+        newVal ? this.vueEnter() : this.vueLeave();
+      },
+      // 表示同时监听初始化时的props的show的意思
+      immediate: true
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return common_vendor.e({
+    a: $data.inited
+  }, $data.inited ? {
+    b: common_vendor.o((...args) => _ctx.clickHandler && _ctx.clickHandler(...args)),
+    c: common_vendor.n($data.classes),
+    d: common_vendor.s($options.mergeStyle),
+    e: common_vendor.o((...args) => _ctx.noop && _ctx.noop(...args))
+  } : {});
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5cec8177"]]);
+my.createComponent(Component);

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-transition/u-transition.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}