mahjong-ui/плавное-отображение-скрытие|smooth-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.отклик = {};
        this.показываем = true;
        var тут = this;
        элемент.addEventListener(
            "animationend",
            function()
            {
                if (тут.показываем && тут.отклик.отображение)
                {
                    тут.отклик.отображение();
                }
                else if (!тут.показываем)
                {
                    элемент.style.display = "none";
                    if (тут.отклик.скрытие)
                    {
                        тут.отклик.скрытие();
                    }
                }
            }
        );
    };
    
    // Конструктор.
    this.__создатьКадры();
    this.__создатьПреобразования();
    this.__отслеживатьЗавершениеАнимации();
};