Я начинаю работать над этим кодом, но когда я закончу, я нахожу проблему с переходом.
Иногда это работает, а иногда не работает. Иногда он работает на hide() и не работает на show(), затем иногда наоборот, а иногда и оба не работают.
Для тестирования я просто обновляю sh страницу и получаю результат после каждого refre sh, который является другим результатом.
Мой JavaScript код:
const $ = function (_element) {
class myClass {
constructor (_element) {
this._timeOut = 0;
this._element = typeof(_element) === "string" && _element !== "" && document.querySelectorAll(_element).length > 0 ? Array.from(document.querySelectorAll(_element)) : false;
}
_checkElement () {
if (!(this._element)) {
console.error("Function Parameter: Set at least one element on $ function parameters");
return false;
} else {
return true;
}
}
hide(_time, _callBackFunction = false) {
if (this._checkElement()) {
this._element.forEach( (element) => {
element.style.transition = `opacity ${_time}ms`;
element.style.opacity = 0;
setTimeout( _ => {
element.style.display = "none";
element.style.transition = "";
if (!!(_callBackFunction)) {
_callBackFunction();
}
}, _time);
});
}
this._timeOut += _time;
console.log(this._timeOut);
return this;
}
show(_time, _callBackFunction = false) {
setTimeout( _ => {
if (this._checkElement()) {
this._element.forEach((element) => {
element.style.transition = `opacity ${_time}ms`;
element.style.display = "block";
element.style.opacity = 1;
setTimeout( _ => {
element.style.transition = "";
if (!!(_callBackFunction)) {
_callBackFunction();
}
}, _time);
});
}
}, this._timeOut)
}
}
let newElement = new myClass(_element);
return newElement;
};
$("div").hide(2000).show(1000);