no message
This commit is contained in:
@@ -0,0 +1,136 @@
|
||||
require("../../../../@babel/runtime/helpers/Arrayincludes");
|
||||
var t = require("../../../../@babel/runtime/helpers/objectSpread2"),
|
||||
e = require("../../../../@babel/runtime/helpers/classCallCheck"),
|
||||
n = require("../../../../@babel/runtime/helpers/createClass"),
|
||||
i = require("../../../../common/vendor.js"),
|
||||
a = (function () {
|
||||
function a(n, r) {
|
||||
e(this, a),
|
||||
(this.options = n),
|
||||
(this.animation = i.index.createAnimation(t({}, n))),
|
||||
(this.currentStepAnimates = {}),
|
||||
(this.next = 0),
|
||||
(this.$ = r);
|
||||
}
|
||||
return (
|
||||
n(a, [
|
||||
{
|
||||
key: "_nvuePushAnimates",
|
||||
value: function (t, e) {
|
||||
var n = {};
|
||||
if (
|
||||
((n = this.currentStepAnimates[this.next] || {
|
||||
styles: {},
|
||||
config: {},
|
||||
}),
|
||||
r.includes(t))
|
||||
) {
|
||||
n.styles.transform || (n.styles.transform = "");
|
||||
var i = "";
|
||||
"rotate" === t && (i = "deg"),
|
||||
(n.styles.transform += "".concat(t, "(").concat(e + i, ") "));
|
||||
} else n.styles[t] = "".concat(e);
|
||||
this.currentStepAnimates[this.next] = n;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "_animateRun",
|
||||
value: function () {
|
||||
var e =
|
||||
arguments.length > 0 && void 0 !== arguments[0]
|
||||
? arguments[0]
|
||||
: {},
|
||||
n =
|
||||
arguments.length > 1 && void 0 !== arguments[1]
|
||||
? arguments[1]
|
||||
: {},
|
||||
i = this.$.$refs.ani.ref;
|
||||
if (i)
|
||||
return new Promise(function (a, r) {
|
||||
nvueAnimation.transition(i, t({ styles: e }, n), function (t) {
|
||||
a();
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "_nvueNextAnimate",
|
||||
value: function (t) {
|
||||
var e = this,
|
||||
n =
|
||||
arguments.length > 1 && void 0 !== arguments[1]
|
||||
? arguments[1]
|
||||
: 0,
|
||||
i = arguments.length > 2 ? arguments[2] : void 0,
|
||||
a = t[n];
|
||||
if (a) {
|
||||
var r = a.styles,
|
||||
s = a.config;
|
||||
this._animateRun(r, s).then(function () {
|
||||
(n += 1), e._nvueNextAnimate(t, n, i);
|
||||
});
|
||||
} else
|
||||
(this.currentStepAnimates = {}),
|
||||
"function" == typeof i && i(),
|
||||
(this.isEnd = !0);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "step",
|
||||
value: function () {
|
||||
var t =
|
||||
arguments.length > 0 && void 0 !== arguments[0]
|
||||
? arguments[0]
|
||||
: {};
|
||||
return this.animation.step(t), this;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "run",
|
||||
value: function (t) {
|
||||
(this.$.animationData = this.animation.export()),
|
||||
(this.$.timer = setTimeout(function () {
|
||||
"function" == typeof t && t();
|
||||
}, this.$.durationTime));
|
||||
},
|
||||
},
|
||||
]),
|
||||
a
|
||||
);
|
||||
})(),
|
||||
r = [
|
||||
"matrix",
|
||||
"matrix3d",
|
||||
"rotate",
|
||||
"rotate3d",
|
||||
"rotateX",
|
||||
"rotateY",
|
||||
"rotateZ",
|
||||
"scale",
|
||||
"scale3d",
|
||||
"scaleX",
|
||||
"scaleY",
|
||||
"scaleZ",
|
||||
"skew",
|
||||
"skewX",
|
||||
"skewY",
|
||||
"translate",
|
||||
"translate3d",
|
||||
"translateX",
|
||||
"translateY",
|
||||
"translateZ",
|
||||
];
|
||||
r
|
||||
.concat(
|
||||
["opacity", "backgroundColor"],
|
||||
["width", "height", "left", "right", "top", "bottom"]
|
||||
)
|
||||
.forEach(function (t) {
|
||||
a.prototype[t] = function () {
|
||||
var e;
|
||||
return (e = this.animation)[t].apply(e, arguments), this;
|
||||
};
|
||||
}),
|
||||
(exports.createAnimation = function (t, e) {
|
||||
if (e) return clearTimeout(e.timer), new a(t, e);
|
||||
});
|
||||
@@ -0,0 +1,226 @@
|
||||
var t = require("../../../../@babel/runtime/helpers/toConsumableArray"),
|
||||
i = require("../../../../@babel/runtime/helpers/typeof"),
|
||||
n = require("../../../../@babel/runtime/helpers/objectSpread2"),
|
||||
a = require("./createAnimation.js"),
|
||||
o = require("../../../../common/vendor.js"),
|
||||
e = {
|
||||
name: "uniTransition",
|
||||
emits: ["click", "change"],
|
||||
props: {
|
||||
show: { type: Boolean, default: !1 },
|
||||
modeClass: {
|
||||
type: [Array, String],
|
||||
default: function () {
|
||||
return "fade";
|
||||
},
|
||||
},
|
||||
duration: { type: Number, default: 300 },
|
||||
styles: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
customClass: { type: String, default: "" },
|
||||
onceRender: { type: Boolean, default: !1 },
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
isShow: !1,
|
||||
transform: "",
|
||||
opacity: 1,
|
||||
animationData: {},
|
||||
durationTime: 300,
|
||||
config: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler: function (t) {
|
||||
t ? this.open() : this.isShow && this.close();
|
||||
},
|
||||
immediate: !0,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
stylesObject: function () {
|
||||
var t = n(
|
||||
n({}, this.styles),
|
||||
{},
|
||||
{ "transition-duration": this.duration / 1e3 + "s" }
|
||||
),
|
||||
i = "";
|
||||
for (var a in t) i += this.toLine(a) + ":" + t[a] + ";";
|
||||
return i;
|
||||
},
|
||||
transformStyles: function () {
|
||||
return (
|
||||
"transform:" +
|
||||
this.transform +
|
||||
";opacity:" +
|
||||
this.opacity +
|
||||
";" +
|
||||
this.stylesObject
|
||||
);
|
||||
},
|
||||
},
|
||||
created: function () {
|
||||
(this.config = {
|
||||
duration: this.duration,
|
||||
timingFunction: "ease",
|
||||
transformOrigin: "50% 50%",
|
||||
delay: 0,
|
||||
}),
|
||||
(this.durationTime = this.duration);
|
||||
},
|
||||
methods: {
|
||||
init: function () {
|
||||
var t =
|
||||
arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
|
||||
t.duration && (this.durationTime = t.duration),
|
||||
(this.animation = a.createAnimation(
|
||||
Object.assign(this.config, t),
|
||||
this
|
||||
));
|
||||
},
|
||||
onClick: function () {
|
||||
this.$emit("click", { detail: this.isShow });
|
||||
},
|
||||
step: function (n) {
|
||||
var a =
|
||||
arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
|
||||
if (this.animation) {
|
||||
for (var o in n)
|
||||
try {
|
||||
var e;
|
||||
"object" == i(n[o])
|
||||
? (e = this.animation)[o].apply(e, t(n[o]))
|
||||
: this.animation[o](n[o]);
|
||||
} catch (t) {
|
||||
console.error("方法 ".concat(o, " 不存在"));
|
||||
}
|
||||
return this.animation.step(a), this;
|
||||
}
|
||||
},
|
||||
run: function (t) {
|
||||
this.animation && this.animation.run(t);
|
||||
},
|
||||
open: function () {
|
||||
var t = this;
|
||||
clearTimeout(this.timer), (this.transform = ""), (this.isShow = !0);
|
||||
var i = this.styleInit(!1),
|
||||
n = i.opacity,
|
||||
o = i.transform;
|
||||
void 0 !== n && (this.opacity = n),
|
||||
(this.transform = o),
|
||||
this.$nextTick(function () {
|
||||
t.timer = setTimeout(function () {
|
||||
(t.animation = a.createAnimation(t.config, t)),
|
||||
t.tranfromInit(!1).step(),
|
||||
t.animation.run(),
|
||||
t.$emit("change", { detail: t.isShow });
|
||||
}, 20);
|
||||
});
|
||||
},
|
||||
close: function (t) {
|
||||
var i = this;
|
||||
this.animation &&
|
||||
this.tranfromInit(!0)
|
||||
.step()
|
||||
.run(function () {
|
||||
(i.isShow = !1), (i.animationData = null), (i.animation = null);
|
||||
var t = i.styleInit(!1),
|
||||
n = t.opacity,
|
||||
a = t.transform;
|
||||
(i.opacity = n || 1),
|
||||
(i.transform = a),
|
||||
i.$emit("change", { detail: i.isShow });
|
||||
});
|
||||
},
|
||||
styleInit: function (t) {
|
||||
var i = this,
|
||||
n = { transform: "" },
|
||||
a = function (t, a) {
|
||||
"fade" === a
|
||||
? (n.opacity = i.animationType(t)[a])
|
||||
: (n.transform += i.animationType(t)[a] + " ");
|
||||
};
|
||||
return (
|
||||
"string" == typeof this.modeClass
|
||||
? a(t, this.modeClass)
|
||||
: this.modeClass.forEach(function (i) {
|
||||
a(t, i);
|
||||
}),
|
||||
n
|
||||
);
|
||||
},
|
||||
tranfromInit: function (t) {
|
||||
var i = this,
|
||||
n = function (t, n) {
|
||||
var a = null;
|
||||
"fade" === n
|
||||
? (a = t ? 0 : 1)
|
||||
: ((a = t ? "-100%" : "0"),
|
||||
"zoom-in" === n && (a = t ? 0.8 : 1),
|
||||
"zoom-out" === n && (a = t ? 1.2 : 1),
|
||||
"slide-right" === n && (a = t ? "100%" : "0"),
|
||||
"slide-bottom" === n && (a = t ? "100%" : "0")),
|
||||
i.animation[i.animationMode()[n]](a);
|
||||
};
|
||||
return (
|
||||
"string" == typeof this.modeClass
|
||||
? n(t, this.modeClass)
|
||||
: this.modeClass.forEach(function (i) {
|
||||
n(t, i);
|
||||
}),
|
||||
this.animation
|
||||
);
|
||||
},
|
||||
animationType: function (t) {
|
||||
return {
|
||||
fade: t ? 1 : 0,
|
||||
"slide-top": "translateY(".concat(t ? "0" : "-100%", ")"),
|
||||
"slide-right": "translateX(".concat(t ? "0" : "100%", ")"),
|
||||
"slide-bottom": "translateY(".concat(t ? "0" : "100%", ")"),
|
||||
"slide-left": "translateX(".concat(t ? "0" : "-100%", ")"),
|
||||
"zoom-in": "scaleX("
|
||||
.concat(t ? 1 : 0.8, ") scaleY(")
|
||||
.concat(t ? 1 : 0.8, ")"),
|
||||
"zoom-out": "scaleX("
|
||||
.concat(t ? 1 : 1.2, ") scaleY(")
|
||||
.concat(t ? 1 : 1.2, ")"),
|
||||
};
|
||||
},
|
||||
animationMode: function () {
|
||||
return {
|
||||
fade: "opacity",
|
||||
"slide-top": "translateY",
|
||||
"slide-right": "translateX",
|
||||
"slide-bottom": "translateY",
|
||||
"slide-left": "translateX",
|
||||
"zoom-in": "scale",
|
||||
"zoom-out": "scale",
|
||||
};
|
||||
},
|
||||
toLine: function (t) {
|
||||
return t.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
},
|
||||
},
|
||||
},
|
||||
s = o._export_sfc(e, [
|
||||
[
|
||||
"render",
|
||||
function (t, i, n, a, e, s) {
|
||||
return {
|
||||
a: e.isShow,
|
||||
b: e.animationData,
|
||||
c: o.n(n.customClass),
|
||||
d: o.s(s.transformStyles),
|
||||
e: o.o(function () {
|
||||
return s.onClick && s.onClick.apply(s, arguments);
|
||||
}),
|
||||
};
|
||||
},
|
||||
],
|
||||
]);
|
||||
wx.createComponent(s);
|
||||
@@ -0,0 +1 @@
|
||||
{ "component": true, "usingComponents": {} }
|
||||
@@ -0,0 +1,10 @@
|
||||
<view
|
||||
animation="{{b}}"
|
||||
bindtap="{{e}}"
|
||||
class="{{c}}"
|
||||
hidden="{{!a}}"
|
||||
ref="ani"
|
||||
style="{{d}}"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
Reference in New Issue
Block a user