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.__отслеживатьЗавершениеАнимации(); };