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