Browse Source

Изменения от Главреда ГитЖС | Changes of GitJS Glavred

master
Главред | Glavred 4 years ago
parent
commit
4821f97088
1 changed files with 38 additions and 25 deletions
  1. +38
    -25
      плавно-отобразить-скрыть|smoothly-show-hide.js

+ 38
- 25
плавно-отобразить-скрыть|smoothly-show-hide.js View File

@@ -1,13 +1,5 @@
ПлавноОтобразитьСкрыть = function(элемент, настройки)
ПлавноОтобразитьСкрыть = function(элемент, настройки = null)
{ {
if (!настройки)
{
настройки = {
"прозрачность": 1,
"отклик": {},
};
}

this.отобразить = () => this.отобразить = () =>
{ {
this.показываем = true; this.показываем = true;
@@ -18,6 +10,7 @@
opacity: 0; opacity: 0;
animation: ${элемент.id}ПлавноОтобразить 0.4s ease; animation: ${элемент.id}ПлавноОтобразить 0.4s ease;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-delay: ${this.настройки.задержка}s;
} }
`; `;
}; };
@@ -28,13 +21,38 @@
this.преобразования.innerHTML = ` this.преобразования.innerHTML = `
#${элемент.id} #${элемент.id}
{ {
opacity: ${настройки.прозрачность};
opacity: ${this.настройки.прозрачность};
animation: ${элемент.id}ПлавноСкрыть 0.4s ease; animation: ${элемент.id}ПлавноСкрыть 0.4s ease;
animation-fill-mode: forwards; 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.__создатьКадры = () =>
{ {
this.кадры = document.createElement("style"); this.кадры = document.createElement("style");
@@ -48,14 +66,14 @@
} }
100% 100%
{ {
opacity: ${настройки.прозрачность};
opacity: ${this.настройки.прозрачность};
} }
} }
@keyframes ${элемент.id}ПлавноСкрыть @keyframes ${элемент.id}ПлавноСкрыть
{ {
0% 0%
{ {
opacity: ${настройки.прозрачность};
opacity: ${this.настройки.прозрачность};
} }
100% 100%
{ {
@@ -79,16 +97,16 @@
"animationend", "animationend",
function() function()
{ {
if (тут.показываем && настройки.отклик && настройки.отклик.отображение)
if (тут.показываем && тут.настройки.отклик.отображение)
{ {
настройки.отклик.отображение();
тут.настройки.отклик.отображение();
} }
else if (!тут.показываем) else if (!тут.показываем)
{ {
элемент.style.display = "none"; элемент.style.display = "none";
if (настройки.отклик && настройки.отклик.скрытие)
if (тут.настройки.отклик.скрытие)
{ {
настройки.отклик.скрытие();
тут.настройки.отклик.скрытие();
} }
} }
} }
@@ -96,6 +114,7 @@
}; };
// Конструктор. // Конструктор.
this.__задатьНастройкиПоУмолчанию();
this.__создатьКадры(); this.__создатьКадры();
this.__создатьПреобразования(); this.__создатьПреобразования();
this.__отслеживатьЗавершениеАнимации(); this.__отслеживатьЗавершениеАнимации();
@@ -106,18 +125,12 @@
// 常用的单线变型 // 常用的单线变型
// Frequently used single line variants. // Frequently used single line variants.


плавноСкрытьИУдалить = id =>
плавноСкрытьИУдалить = (id, настройки = null) =>
{ {
var элемент = $(`#${id}`); var элемент = $(`#${id}`);
function окончание() {
var плавно = new ПлавноОтобразитьСкрыть(элемент.get(0), настройки);
плавно.настройки.отклик.скрытие = function() {
элемент.remove(); элемент.remove();
}; };
var настройки = {
"прозрачность": 1,
"отклик": {
"скрытие": окончание,
},
};
var плавно = new ПлавноОтобразитьСкрыть(элемент.get(0), настройки);
плавно.скрыть(); плавно.скрыть();
}; };

Loading…
Cancel
Save