diff options
| author | Marco Ambrosini <marcoambrosini@pm.me> | 2020-03-04 11:22:29 +0300 |
|---|---|---|
| committer | Marco Ambrosini <marcoambrosini@pm.me> | 2020-03-04 11:32:50 +0300 |
| commit | ac8c9e34611a2bcb38b8cdd163b8ff4842d6868c (patch) | |
| tree | 52002916806059ba45f5f9c2d202ec1509afd78a /src/components/ChatView.vue | |
| parent | de681064eb8841b4821e7f9b83a74a63b471bc81 (diff) | |
Add transitions
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
Diffstat (limited to 'src/components/ChatView.vue')
| -rw-r--r-- | src/components/ChatView.vue | 45 |
1 files changed, 36 insertions, 9 deletions
diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue index 1b69a226d..3e48b3247 100644 --- a/src/components/ChatView.vue +++ b/src/components/ChatView.vue @@ -24,22 +24,26 @@ @dragover.prevent="isDraggingOver = true" @dragleave.prevent="isDraggingOver = false" @drop.prevent="processFiles"> - <transition name="fade" mode="out-in"> + <transition name="slide" mode="out-in"> <div v-show="isDraggingOver" class="dragover"> <div class="drop-hint"> + <div class="icon-upload drop-hint__icon" /> <h3 class="drop-hint__text"> - {{ t('spreed', 'Drop your files here to upload') }} + {{ t('spreed', 'Drop your files to upload') }} </h3> - <div class="icon-upload drop-hint__icon" /> </div> </div> </transition> - <MessagesList - :token="token" /> - <NewMessageForm /> + <transition name="fade" mode="out-in"> + <MessagesList + :token="token" /> + </transition> + <transition name="fade" mode="out-in"> + <NewMessageForm v-show="!isDraggingOver" /> + </transition> </div> </template> @@ -109,7 +113,6 @@ export default { <style lang="scss" scoped> .chatView { height: 100%; - display: flex; flex-direction: column; flex-grow: 1; @@ -119,13 +122,37 @@ export default { width: 100%; height: 100%; background: var(--color-primary-light); - z-index: 10; + z-index: 11; + display: flex; } .drop-hint { margin: auto; } +.slide { + &-enter { + transform: translateY(-50%); + opacity: 0; + } + &-enter-to { + transform: translateY(0); + opacity: 1; + } + &-leave { + transform: translateY(0); + opacity: 1; + } + &-leave-to { + transform: translateY(-50%); + opacity: 0; + } + &-enter-active, + &-leave-active { + transition: all 150ms ease-in-out; + } +} + .fade { &-enter { opacity: 0; @@ -141,7 +168,7 @@ export default { } &-enter-active, &-leave-active { - transition: all 200ms ease-in-out; + transition: all 150ms ease-in-out; } } </style> |