102 lines
2.9 KiB
JavaScript
102 lines
2.9 KiB
JavaScript
ПлавноОтобразитьСкрыть = function(элемент, настройки)
|
||
{
|
||
if (!настройки)
|
||
{
|
||
настройки = {
|
||
"прозрачность": 1,
|
||
"отклик": {},
|
||
};
|
||
}
|
||
|
||
this.отобразить = () =>
|
||
{
|
||
this.показываем = true;
|
||
элемент.style.display = "block";
|
||
this.преобразования.innerHTML = `
|
||
#${элемент.id}
|
||
{
|
||
opacity: 0;
|
||
animation: ${элемент.id}ПлавноОтобразить 0.4s ease;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
`;
|
||
};
|
||
|
||
this.скрыть = () =>
|
||
{
|
||
this.показываем = false;
|
||
this.преобразования.innerHTML = `
|
||
#${элемент.id}
|
||
{
|
||
opacity: ${настройки.прозрачность};
|
||
animation: ${элемент.id}ПлавноСкрыть 0.4s ease;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
`;
|
||
};
|
||
|
||
this.__создатьКадры = () =>
|
||
{
|
||
this.кадры = document.createElement("style");
|
||
document.head.appendChild(this.кадры);
|
||
this.кадры.innerHTML = `
|
||
@keyframes ${элемент.id}ПлавноОтобразить
|
||
{
|
||
0%
|
||
{
|
||
opacity: 0;
|
||
}
|
||
100%
|
||
{
|
||
opacity: ${настройки.прозрачность};
|
||
}
|
||
}
|
||
@keyframes ${элемент.id}ПлавноСкрыть
|
||
{
|
||
0%
|
||
{
|
||
opacity: ${настройки.прозрачность};
|
||
}
|
||
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.__отслеживатьЗавершениеАнимации();
|
||
}; |