diff --git a/css/modal.css b/css/modal.css index 4ff4931..ef6536e 100644 --- a/css/modal.css +++ b/css/modal.css @@ -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; diff --git a/package-lock.json b/package-lock.json index 3ee9fbe..9b652f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": {} }, diff --git a/tailwind.config.js b/tailwind.config.js index 8774ee4..e6c93da 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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, diff --git a/ts/modules/modal.ts b/ts/modules/modal.ts index 7bbc071..dcd2ad8 100644 --- a/ts/modules/modal.ts +++ b/ts/modules/modal.ts @@ -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();