147 lines
4.3 KiB
JavaScript
147 lines
4.3 KiB
JavaScript
ПлавноОтобразитьСкрыть = function(элемент, настройки = null)
|
||
{
|
||
this.отобразить = () =>
|
||
{
|
||
this.показываем = true;
|
||
элемент.style.display = "block";
|
||
this.преобразования.innerHTML = `
|
||
#${элемент.id}
|
||
{
|
||
opacity: 0;
|
||
animation: ${элемент.id}ПлавноОтобразить 0.4s ease;
|
||
animation-fill-mode: forwards;
|
||
animation-delay: ${this.настройки.задержка}s;
|
||
}
|
||
`;
|
||
};
|
||
|
||
this.скрыть = () =>
|
||
{
|
||
this.показываем = false;
|
||
this.преобразования.innerHTML = `
|
||
#${элемент.id}
|
||
{
|
||
opacity: ${this.настройки.прозрачность};
|
||
animation: ${элемент.id}ПлавноСкрыть 0.4s ease;
|
||
animation-fill-mode: forwards;
|
||
animation-delay: ${this.настройки.задержка}s;
|
||
}
|
||
`;
|
||
};
|
||
|
||
this.__задатьНастройкиПоУмолчанию = () =>
|
||
{
|
||
var умолчание = {
|
||
"задержка": 0,
|
||
"прозрачность": 1,
|
||
"отклик": {},
|
||
};
|
||
if (!настройки)
|
||
{
|
||
this.настройки = умолчание;
|
||
}
|
||
else
|
||
{
|
||
this.настройки = настройки;
|
||
}
|
||
for (var ключ in умолчание)
|
||
{
|
||
if (!(ключ in this.настройки))
|
||
{
|
||
this.настройки[ключ] = умолчание[ключ];
|
||
}
|
||
}
|
||
};
|
||
|
||
this.__создатьКадры = () =>
|
||
{
|
||
this.кадры = document.createElement("style");
|
||
document.head.appendChild(this.кадры);
|
||
this.кадры.innerHTML = `
|
||
@keyframes ${элемент.id}ПлавноОтобразить
|
||
{
|
||
0%
|
||
{
|
||
opacity: 0;
|
||
}
|
||
100%
|
||
{
|
||
opacity: ${this.настройки.прозрачность};
|
||
}
|
||
}
|
||
@keyframes ${элемент.id}ПлавноСкрыть
|
||
{
|
||
0%
|
||
{
|
||
opacity: ${this.настройки.прозрачность};
|
||
}
|
||
100%
|
||
{
|
||
opacity: 0;
|
||
}
|
||
}
|
||
`;
|
||
};
|
||
|
||
this.__создатьПреобразования = () =>
|
||
{
|
||
this.преобразования = document.createElement("style");
|
||
document.head.appendChild(this.преобразования);
|
||
};
|
||
|
||
this.__отслеживатьЗавершениеАнимации = () =>
|
||
{
|
||
this.показываем = true;
|
||
var тут = this;
|
||
элемент.addEventListener(
|
||
"animationend",
|
||
function()
|
||
{
|
||
if (тут.показываем && тут.настройки.отклик.отображение)
|
||
{
|
||
тут.настройки.отклик.отображение();
|
||
}
|
||
else if (!тут.показываем)
|
||
{
|
||
элемент.style.display = "none";
|
||
if (тут.настройки.отклик.скрытие)
|
||
{
|
||
тут.настройки.отклик.скрытие();
|
||
}
|
||
}
|
||
}
|
||
);
|
||
};
|
||
|
||
// Конструктор.
|
||
this.__задатьНастройкиПоУмолчанию();
|
||
this.__создатьКадры();
|
||
this.__создатьПреобразования();
|
||
this.__отслеживатьЗавершениеАнимации();
|
||
};
|
||
|
||
|
||
// Часто используемые варианты в одну строку.
|
||
// 常用的单线变型
|
||
// Frequently used single line variants.
|
||
|
||
плавноСкрытьИУдалить = (id, настройки = null) =>
|
||
{
|
||
var элемент = $(`#${id}`);
|
||
var плавно = new ПлавноОтобразитьСкрыть(элемент.get(0), настройки);
|
||
плавно.настройки.отклик.скрытие = function() {
|
||
элемент.remove();
|
||
};
|
||
плавно.скрыть();
|
||
};
|
||
|
||
|
||
// // // //
|
||
|
||
|
||
плавноСкрыть = (id, настройки = null) =>
|
||
{
|
||
var элемент = $(`#${id}`);
|
||
var плавно = new ПлавноОтобразитьСкрыть(элемент.get(0), настройки);
|
||
плавно.скрыть();
|
||
}; |