init
This commit is contained in:
93
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/transition/transition.js
vendored
Normal file
93
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/transition/transition.js
vendored
Normal file
@@ -0,0 +1,93 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
|
||||
const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
|
||||
require("../_utils/env.js");
|
||||
const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
|
||||
const uni_modules_nutuiUni_components_transition_useTransition = require("./use-transition.js");
|
||||
const transitionProps = {
|
||||
...uni_modules_nutuiUni_components__utils_props.commonProps,
|
||||
/**
|
||||
* @description 内置动画名称,可选值为 `fade` `fade-up` `fade-down` f`ade-left` `fade-right` `slide-up` `slide-down` `slide-left` `slide-right`
|
||||
*/
|
||||
name: uni_modules_nutuiUni_components__utils_props.makeStringProp("fade"),
|
||||
/**
|
||||
* @description 是否展示过渡动画级
|
||||
*/
|
||||
show: Boolean,
|
||||
/**
|
||||
* @description 动画时长,单位为毫秒
|
||||
*/
|
||||
duration: uni_modules_nutuiUni_components__utils_props.makeNumberProp(300),
|
||||
/**
|
||||
* @description 动画函数
|
||||
*/
|
||||
timingFunction: uni_modules_nutuiUni_components__utils_props.makeStringProp("ease"),
|
||||
destroyOnClose: Boolean,
|
||||
/**
|
||||
* @description 进入动画前的类名
|
||||
*/
|
||||
enterFromClass: String,
|
||||
/**
|
||||
* @description 进入动画时的类名
|
||||
*/
|
||||
enterActiveClass: String,
|
||||
/**
|
||||
* @description 进入动画后的类名
|
||||
*/
|
||||
enterToClass: String,
|
||||
/**
|
||||
* @description 离开动画前的类名
|
||||
*/
|
||||
leaveFromClass: String,
|
||||
/**
|
||||
* @description 离开动画时的类名
|
||||
*/
|
||||
leaveActiveClass: String,
|
||||
/**
|
||||
* @description 离开动画后的类名
|
||||
*/
|
||||
leaveToClass: String
|
||||
};
|
||||
const transitionEmits = {
|
||||
beforeEnter: () => true,
|
||||
enter: () => true,
|
||||
afterEnter: () => true,
|
||||
beforeLeave: () => true,
|
||||
leave: () => true,
|
||||
afterLeave: () => true,
|
||||
[uni_modules_nutuiUni_components__constants_event.CLICK_EVENT]: (evt) => evt instanceof Object
|
||||
};
|
||||
const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-transition`;
|
||||
const __default__ = common_vendor.defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: "shared"
|
||||
}
|
||||
});
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
...__default__,
|
||||
props: transitionProps,
|
||||
emits: transitionEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emits = __emit;
|
||||
const { display, classes, clickHandler, styles } = uni_modules_nutuiUni_components_transition_useTransition.useTransition(props, emits);
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: !props.destroyOnClose || common_vendor.unref(display)
|
||||
}, !props.destroyOnClose || common_vendor.unref(display) ? {
|
||||
b: common_vendor.n(common_vendor.unref(classes)),
|
||||
c: common_vendor.s(common_vendor.unref(styles)),
|
||||
d: common_vendor.o(
|
||||
//@ts-ignore
|
||||
(...args) => common_vendor.unref(clickHandler) && common_vendor.unref(clickHandler)(...args)
|
||||
)
|
||||
} : {});
|
||||
};
|
||||
}
|
||||
});
|
||||
wx.createComponent(_sfc_main);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/transition/transition.js.map
|
||||
4
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/transition/transition.json
vendored
Normal file
4
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/transition/transition.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/transition/transition.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/transition/transition.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view wx:if="{{a}}" class="{{b}}" style="{{c}}" bindtap="{{d}}"><slot/></view>
|
||||
50
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/transition/transition.wxss
vendored
Normal file
50
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/transition/transition.wxss
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
158
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/transition/use-transition.js
vendored
Normal file
158
unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/transition/use-transition.js
vendored
Normal file
@@ -0,0 +1,158 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
|
||||
const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
|
||||
require("../_utils/env.js");
|
||||
const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
|
||||
const defaultAnimations = {
|
||||
"fade": {
|
||||
enter: "nutFadeIn",
|
||||
leave: "nutFadeOut"
|
||||
},
|
||||
"fade-up": {
|
||||
enter: "nutFadeUpIn",
|
||||
leave: "nutFadeUpOut"
|
||||
},
|
||||
"fade-down": {
|
||||
enter: "nutFadeDownIn",
|
||||
leave: "nutFadeDownOut"
|
||||
},
|
||||
"fade-left": {
|
||||
enter: "nutFadeLeftIn",
|
||||
leave: "nutFadeLeftOut"
|
||||
},
|
||||
"fade-right": {
|
||||
enter: "nutFadeRightIn",
|
||||
leave: "nutFadeRightOut"
|
||||
},
|
||||
"slide-up": {
|
||||
enter: "nutSlideUpIn",
|
||||
leave: "nutSlideDownOut"
|
||||
},
|
||||
"slide-down": {
|
||||
enter: "nutSlideDownIn",
|
||||
leave: "nutSlideUpOut"
|
||||
},
|
||||
"slide-left": {
|
||||
enter: "nutSlideLeftIn",
|
||||
leave: "nutSlideLeftOut"
|
||||
},
|
||||
"slide-right": {
|
||||
enter: "nutSlideRightIn",
|
||||
leave: "nutSlideRightOut"
|
||||
},
|
||||
"zoom": {
|
||||
enter: "nutZoomIn",
|
||||
leave: "nutZoomOut"
|
||||
}
|
||||
};
|
||||
const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-transition`;
|
||||
function isKeyOfAnimations(value) {
|
||||
const keys = Object.keys(defaultAnimations);
|
||||
return keys.includes(value);
|
||||
}
|
||||
function getDefaultClassNames(name) {
|
||||
return {
|
||||
enter: `${name}-enter-from`,
|
||||
enterActive: `${name}-enter-active`,
|
||||
enterTo: `${name}-enter-to ${name}-enter-active`,
|
||||
leave: `${name}-leave-from`,
|
||||
leaveActive: `${name}-leave-active`,
|
||||
leaveTo: `${name}-leave-to ${name}-leave-active`
|
||||
};
|
||||
}
|
||||
function getClassNames(name, {
|
||||
enterClass,
|
||||
enterActiveClass,
|
||||
enterToClass,
|
||||
leaveClass,
|
||||
leaveActiveClass,
|
||||
leaveToClass
|
||||
}) {
|
||||
const defaultClassNames = getDefaultClassNames(name);
|
||||
return {
|
||||
enter: enterClass || defaultClassNames.enter,
|
||||
enterActive: enterActiveClass || defaultClassNames.enterActive,
|
||||
enterTo: enterToClass || defaultClassNames.enterTo,
|
||||
leave: leaveClass || defaultClassNames.leave,
|
||||
leaveActive: leaveActiveClass || defaultClassNames.leaveActive,
|
||||
leaveTo: leaveToClass || defaultClassNames.leaveTo
|
||||
};
|
||||
}
|
||||
function useTransition(props, emit) {
|
||||
const display = common_vendor.ref(false);
|
||||
const name = common_vendor.computed(() => props.name || "fade");
|
||||
const duration = common_vendor.computed(() => props.duration || 200);
|
||||
const animationClass = common_vendor.ref("");
|
||||
const classNames = common_vendor.computed(
|
||||
() => getClassNames(props.name, {
|
||||
enterClass: props.enterFromClass,
|
||||
enterActiveClass: props.enterActiveClass,
|
||||
enterToClass: props.enterToClass,
|
||||
leaveClass: props.leaveFromClass,
|
||||
leaveActiveClass: props.leaveActiveClass,
|
||||
leaveToClass: props.leaveToClass
|
||||
})
|
||||
);
|
||||
async function enter() {
|
||||
var _a, _b;
|
||||
if (display.value)
|
||||
return;
|
||||
emit("beforeEnter");
|
||||
display.value = true;
|
||||
animationClass.value = ((_a = defaultAnimations[name.value]) == null ? void 0 : _a.enter) ? (_b = defaultAnimations[name.value]) == null ? void 0 : _b.enter : `${classNames.value.enter} ${classNames.value.enterActive}`;
|
||||
await common_vendor.nextTick$1();
|
||||
emit("enter");
|
||||
setTimeout(() => {
|
||||
if (!isKeyOfAnimations(props.name))
|
||||
animationClass.value = classNames.value.enterTo;
|
||||
emit("afterEnter");
|
||||
}, duration.value);
|
||||
}
|
||||
async function leave() {
|
||||
var _a, _b;
|
||||
if (!display.value)
|
||||
return;
|
||||
emit("beforeLeave");
|
||||
animationClass.value = ((_a = defaultAnimations[name.value]) == null ? void 0 : _a.leave) ? (_b = defaultAnimations[name.value]) == null ? void 0 : _b.leave : `${classNames.value.leave} ${classNames.value.leaveActive}`;
|
||||
await common_vendor.nextTick$1();
|
||||
emit("leave");
|
||||
setTimeout(() => {
|
||||
if (!props.show && display.value)
|
||||
display.value = false;
|
||||
if (!isKeyOfAnimations(props.name))
|
||||
animationClass.value = classNames.value.leaveTo;
|
||||
emit("afterLeave");
|
||||
}, duration.value);
|
||||
}
|
||||
common_vendor.watch(
|
||||
() => props.show,
|
||||
(val) => {
|
||||
val ? enter() : leave();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
function clickHandler(evt) {
|
||||
emit(uni_modules_nutuiUni_components__constants_event.CLICK_EVENT, evt);
|
||||
}
|
||||
const classes = common_vendor.computed(() => {
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName, {
|
||||
[animationClass.value]: true,
|
||||
"nut-hidden": !display.value
|
||||
});
|
||||
});
|
||||
const styles = common_vendor.computed(() => {
|
||||
return uni_modules_nutuiUni_components__utils_style.getMainStyle(props, {
|
||||
"animation-duration": isKeyOfAnimations(props.name) ? `${props.duration}ms` : "",
|
||||
"animation-timing-function": isKeyOfAnimations(props.name) ? props.timingFunction : ""
|
||||
});
|
||||
});
|
||||
return {
|
||||
display,
|
||||
classes,
|
||||
styles,
|
||||
clickHandler
|
||||
};
|
||||
}
|
||||
exports.useTransition = useTransition;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/transition/use-transition.js.map
|
||||
Reference in New Issue
Block a user