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

ПлавноОтобразитьСкрыть = 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), настройки);
    плавно.скрыть();
};