Assclaw/jfa-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages 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
4 changed files with 29 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts/modules/modal.ts
+6 -5
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();