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">
.modal(v-bind:class='{ "is-active": isShown }')
.modal-background
transition(:duration="400")
.modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container
.modal-content
transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-blue
span Copy link to this section
section

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

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

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

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

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

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