n/rpg-cards-ng
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

transitions for notifications

Browse source
This commit is contained in:
koehr 2020-06-30 12:27:35 +02:00
parent a72d940851
commit c3db15a1f8
2 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/assets/app.css
View file

@ -72,20 +72,21 @@ footer {
display: block; display: block;
margin-top: 1.5em; margin-top: 1.5em;
} }
section[name=notifications] { section.notification-section {
display: block; display: block;
max-width: 70rem; max-width: 70rem;
margin: 0 auto 1em; margin: 0 auto 1em;
} }
section[name=notifications] > .note { section.notification-section > .note {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1em 1.5em; padding: 1em 1.5em;
background-color: #0006; background-color: #0006;
border: .5em solid #000; border: .5em solid #000;
transition: opacity .5s ease, transform .3s ease;
} }
section[name=notifications] > .warning { section.notification-section > .warning {
border-color: red; border-color: red;
} }
@ -203,3 +204,12 @@ button.action-close {
margin: auto inherit; margin: auto inherit;
text-align: center; text-align: center;
} }
.notifications-enter-from, .notifications-leave-to {
opacity: 0;
transform: translate(0, -100px);
}
.notifications-leave-from, .notifications-enter-to {
opacity: 1;
transform: translate(0, 0);
}

4
src/components/Notifications.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<section name="notifications"> <transition-group name="notifications" tag="section" class="notification-section">
<p class="note" :class="note.level" v-for="note in notDismissedNotes"> <p class="note" :class="note.level" v-for="note in notDismissedNotes">
<strong>{{ note.title }}</strong> <strong>{{ note.title }}</strong>
<div v-html="note.content" /> <div v-html="note.content" />
<button @click="$emit('dismiss', note)">dismiss</button> <button @click="$emit('dismiss', note)">dismiss</button>
</p> </p>
</section> </transition-group>
</template> </template>
<script lang="ts"> <script lang="ts">