ВыборныйСписок = function(родитель, настройки)
{
if (!настройки)
{
настройки = {
"макет": {
"элемент": `
%название%
`,
},
};
}
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.__отслеживатьЗавершениеАнимации();
};