povtorniy-repeating-ui/плавно-отобразить-скрыть|smoothly-show-hide.js

ПлавноОтобразитьСкрыть = 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.__отслеживатьЗавершениеАнимации();
};