liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: improved modal animations

Browse Source
This commit is contained in:
NGPixel 2017-05-26 22:43:34 -04:00
parent 3cb53bd1d5
commit a0a19cd76f
4 changed files with 64 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/js/components/anchor.vue
View File

@ -1,8 +1,11 @@
<template lang="pug"> <template lang="pug">
.modal(v-bind:class='{ "is-active": isShown }') transition(:duration="400")
.modal-background .modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container .modal-container
.modal-content transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-blue header.is-blue
span Copy link to this section span Copy link to this section
section section

9
client/js/components/modal-create-page.vue
View File

@ -1,8 +1,11 @@
<template lang="pug"> <template lang="pug">
.modal(v-bind:class='{ "is-active": isShown }') transition(:duration="400")
.modal-background .modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container .modal-container
.modal-content transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-light-blue Create New Document header.is-light-blue Create New Document
section section
label.label Enter the new document path: label.label Enter the new document path:

9
client/js/components/modal-move-page.vue
View File

@ -1,8 +1,11 @@
<template lang="pug"> <template lang="pug">
.modal(v-bind:class='{ "is-active": isShown }') transition(:duration="400")
.modal-background .modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container .modal-container
.modal-content transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-indigo Move document header.is-indigo Move document
section section
label.label Enter the new document path: label.label Enter the new document path:

21
client/scss/components/modal.scss
View File

@ -1,10 +1,6 @@
.modal { .modal {
align-items: flex-start; align-items: flex-start;
display: none;
&.is-active {
display: block; display: block;
}
&.is-superimposed { &.is-superimposed {
.modal-background { .modal-background {
@ -23,8 +19,15 @@
height: 100vh; height: 100vh;
position: fixed; position: fixed;
background-color: rgba(0,0,0,0.85); background-color: rgba(0,0,0,0.85);
animation: .4s ease fadeIn;
z-index: 10; z-index: 10;
&-enter-active {
animation: .4s ease fadeIn;
}
&-leave-active {
animation: .4s ease fadeOut;
}
} }
.modal-container { .modal-container {
position: fixed; position: fixed;
@ -38,10 +41,16 @@
align-items: center; align-items: center;
} }
.modal-content { .modal-content {
animation: .3s ease zoomIn;
width: 600px; width: 600px;
background-color: #FFF; background-color: #FFF;
&-enter-active {
animation: .3s ease zoomIn;
}
&-leave-active {
animation: .3s ease zoomOut;
}
&.is-expanded { &.is-expanded {
align-self: stretch; align-self: stretch;
width: 100%; width: 100%;