101 lines
4.3 KiB
JavaScript
101 lines
4.3 KiB
JavaScript
export default class AAnimation extends window.AObject {
|
|
constructor(ele = null) {
|
|
super();
|
|
this.element = ele;
|
|
this.onBefore = function () { };
|
|
this.onAnimation = function () { };
|
|
this.onAfter = null;
|
|
this.status = 0;
|
|
}
|
|
setType(type, args = { "parent": null }) {
|
|
args.parent.classList.add("animation" + type);
|
|
this.params = args;
|
|
switch (type) {
|
|
case "Fade":
|
|
this.onBefore = (function () {
|
|
this.trigger("beforeAnimation", this.element);
|
|
if (this.element.classList.contains("show")) {
|
|
this.status = 0;
|
|
this.element.style.opacity = 0;
|
|
} else {
|
|
this.status = 1;
|
|
this.element.classList.add("show");
|
|
}
|
|
});
|
|
this.onAnimation = (function () {
|
|
if (this.status == 0) {
|
|
window.requestTimeout((() => {
|
|
this.element.classList.remove("show");
|
|
this.trigger("endAnimation", this.element);
|
|
}).bind(this), 100, window.registerCancel);
|
|
} else {
|
|
window.requestTimeout((() => {
|
|
var f = function (ev) {
|
|
if (ev.propertyName == "opacity") {
|
|
this.trigger("endAnimation", this.element);
|
|
ev.target.removeEventListener("transitionend", f, false);
|
|
}
|
|
}
|
|
this.element.addEventListener('transitionend', f.bind(this), false);
|
|
this.element.style.opacity = 1;
|
|
|
|
}).bind(this), 50, window.registerCancel);
|
|
}
|
|
});
|
|
break;
|
|
case "Slide":
|
|
var slideC = document.createElement("div");
|
|
slideC.classList.add("slideContent");
|
|
while (this.params.parent.childNodes.length > 0) {
|
|
slideC.appendChild(this.params.parent.childNodes[0]);
|
|
}
|
|
this.params.parent.appendChild(slideC);
|
|
|
|
slideC.querySelectorAll(".tabcontent").forEach((el) => {
|
|
let style = this.params.parent.currentStyle || window.getComputedStyle(this.params.parent);
|
|
let m = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
|
|
let w = this.params.parent.offsetWidth;
|
|
if (m < 0) {
|
|
// w += Math.abs(m);
|
|
}
|
|
el.style.width = w + "px";
|
|
})
|
|
this.slideC = slideC;
|
|
this.onBefore = (function () {
|
|
this.trigger("beforeAnimation", this.element);
|
|
if (this.element.classList.contains("show")) {
|
|
this.status = 0;
|
|
} else {
|
|
this.status = 1;
|
|
this.element.classList.add("show");
|
|
}
|
|
});
|
|
this.onAnimation = (function () {
|
|
|
|
if (this.status == 0) {
|
|
this.element.classList.remove("show");
|
|
this.trigger("endAnimation", this.element);
|
|
} else {
|
|
|
|
var f = function (ev) {
|
|
if (ev.propertyName == "transform") {
|
|
this.trigger("endAnimation", this.element);
|
|
ev.target.removeEventListener("transitionend", f, false);
|
|
}
|
|
}
|
|
this.slideC.addEventListener('transitionend', f.bind(this), false);
|
|
this.slideC.style.transform = "translateX(-" + this.element.offsetLeft + "px)";
|
|
|
|
}
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
animation() {
|
|
if (this.onBefore != null) this.onBefore.call(this);
|
|
this.onAnimation.call(this);
|
|
}
|
|
dispose() {
|
|
|
|
}
|
|
} |