hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-22 09:00:10 +00:00
Code Issues Projects Releases Wiki Activity

modal: change transition

Browse Source 
now a simple fade-in/fade-out, which is part of tailwind.config.js
rather than modal.css.
This commit is contained in:
Harvey Tindall 2022-01-30 16:24:40 +00:00
parent baffa4a38c
commit ecbff16a88
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
4 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/modal.css
View File

@ -10,19 +10,6 @@
background-color: rgba(0,0,0,40%);
}
.modal-shown {
display: block;
}
@keyframes modal-hide {
from { opacity: 1; }
to { opacity: 0; }
}
.modal-hiding {
animation: modal-hide 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.modal-close {
float: right;
color: #aaa;

1
package-lock.json generated
View File

@ -10165,6 +10165,7 @@
},
"nightwind": {
"version": "git+ssh://git@github.com/yonson2/nightwind.git#755e4b34e0cd782291822b88ad969c69404900da",
"integrity": "sha512-eibdkEdOFtBj/1iTk3W0CP9+GXwW1OXcoLBm+Pf7Sq5JLRmailuhaxGrKlNjZH9Wn8yYPO+LuYHg3NMG27Gjuw==",
"from": "nightwind@github:yonson2/nightwind",
"requires": {}
},

22
tailwind.config.js
View File

@ -6,6 +6,28 @@ module.exports = {
darkMode: 'class',
theme: {
extend: {
keyframes: {
'fade-in': {
'0%': {
opacity: '0'
},
'100%': {
opacity: '1'
}
},
'fade-out': {
'0%': {
opacity: '1'
},
'100%': {
opacity: '0'
}
},
},
animation: {
'fade-in': 'fade-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
'fade-out': 'fade-out 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
},
colors: {
neutral: colors.slate,
positive: colors.green,

11
ts/modules/modal.ts
View File

@ -24,11 +24,12 @@ export class Modal implements Modal {
if (event) {
event.preventDefault();
}
this.modal.classList.add('modal-hiding');
this.modal.classList.add('animate-fade-out');
this.modal.classList.remove("animate-fade-in");
const modal = this.modal;
const listenerFunc = () => {
modal.classList.remove('modal-shown');
modal.classList.remove('modal-hiding');
modal.classList.remove('block');
modal.classList.remove('animate-fade-out');
modal.removeEventListener(window.animationEvent, listenerFunc);
document.dispatchEvent(this.closeEvent);
};
@ -43,11 +44,11 @@ export class Modal implements Modal {
}
show = () => {
this.modal.classList.add('modal-shown');
this.modal.classList.add('block', 'animate-fade-in');
document.dispatchEvent(this.openEvent);
}
toggle = () => {
if (this.modal.classList.contains('modal-shown')) {
if (this.modal.classList.contains('animate-fade-in')) {
this.close();
} else {
this.show();