diff --git a/плавно-отобразить-скрыть|smoothly-show-hide.js b/плавно-отобразить-скрыть|smoothly-show-hide.js index 3f29bfe..40546f2 100644 --- a/плавно-отобразить-скрыть|smoothly-show-hide.js +++ b/плавно-отобразить-скрыть|smoothly-show-hide.js @@ -1,13 +1,5 @@ -ПлавноОтобразитьСкрыть = function(элемент, настройки) +ПлавноОтобразитьСкрыть = function(элемент, настройки = null) { - if (!настройки) - { - настройки = { - "прозрачность": 1, - "отклик": {}, - }; - } - this.отобразить = () => { this.показываем = true; @@ -18,6 +10,7 @@ opacity: 0; animation: ${элемент.id}ПлавноОтобразить 0.4s ease; animation-fill-mode: forwards; + animation-delay: ${this.настройки.задержка}s; } `; }; @@ -28,13 +21,38 @@ this.преобразования.innerHTML = ` #${элемент.id} { - opacity: ${настройки.прозрачность}; + 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"); @@ -48,14 +66,14 @@ } 100% { - opacity: ${настройки.прозрачность}; + opacity: ${this.настройки.прозрачность}; } } @keyframes ${элемент.id}ПлавноСкрыть { 0% { - opacity: ${настройки.прозрачность}; + opacity: ${this.настройки.прозрачность}; } 100% { @@ -79,16 +97,16 @@ "animationend", function() { - if (тут.показываем && настройки.отклик && настройки.отклик.отображение) + if (тут.показываем && тут.настройки.отклик.отображение) { - настройки.отклик.отображение(); + тут.настройки.отклик.отображение(); } else if (!тут.показываем) { элемент.style.display = "none"; - if (настройки.отклик && настройки.отклик.скрытие) + if (тут.настройки.отклик.скрытие) { - настройки.отклик.скрытие(); + тут.настройки.отклик.скрытие(); } } } @@ -96,6 +114,7 @@ }; // Конструктор. + this.__задатьНастройкиПоУмолчанию(); this.__создатьКадры(); this.__создатьПреобразования(); this.__отслеживатьЗавершениеАнимации(); @@ -106,18 +125,12 @@ // 常用的单线变型 // Frequently used single line variants. -плавноСкрытьИУдалить = id => +плавноСкрытьИУдалить = (id, настройки = null) => { var элемент = $(`#${id}`); - function окончание() { + var плавно = new ПлавноОтобразитьСкрыть(элемент.get(0), настройки); + плавно.настройки.отклик.скрытие = function() { элемент.remove(); }; - var настройки = { - "прозрачность": 1, - "отклик": { - "скрытие": окончание, - }, - }; - var плавно = new ПлавноОтобразитьСкрыть(элемент.get(0), настройки); плавно.скрыть(); }; \ No newline at end of file