cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

add an animation for modals

This commit is contained in:
Nolan Lawson 2018-03-03 16:31:00 -08:00
parent 73b3895b23
commit 2f8bd171d4
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
routes/_components/dialog/ModalDialog.html
View File

@ -1,5 +1,12 @@
<div class="modal-dialog-backdrop" tabindex="-1" data-a11y-dialog-hide></div> <div class="modal-dialog-backdrop {{fadedIn ? '' : 'hidden'}}"
<div class="modal-dialog-contents" role="dialog" aria-label="{{label}}" ref:node> tabindex="-1"
data-a11y-dialog-hide
></div>
<div class="modal-dialog-contents {{fadedIn ? '' : 'hidden'}}"
role="dialog"
aria-label="{{label}}"
ref:node
>
<div class="modal-dialog-document" role="document" style="background: {{background || '#000'}};"> <div class="modal-dialog-document" role="document" style="background: {{background || '#000'}};">
<div class="modal-dialog-header"> <div class="modal-dialog-header">
{{#if title}} {{#if title}}
@ -26,6 +33,7 @@
bottom: 0; bottom: 0;
top: 0; top: 0;
background: rgba(51, 51, 51, 0.9); background: rgba(51, 51, 51, 0.9);
transition: opacity 0.2s linear;
} }
.modal-dialog-contents { .modal-dialog-contents {
z-index: 10010; z-index: 10010;
@ -39,6 +47,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
max-height: calc(100% - 20px); max-height: calc(100% - 20px);
transition: opacity 0.2s linear;
} }
.modal-dialog-document { .modal-dialog-document {
@ -94,6 +103,9 @@
this.observe('shown', shown => { this.observe('shown', shown => {
if (shown) { if (shown) {
a11yDialog.show() a11yDialog.show()
requestAnimationFrame(() => {
this.set({ fadedIn: true })
})
} }
}) })
this.observe('closed', closed => { this.observe('closed', closed => {