From 0c28ac49070953c43ff71272b21ae23bd24577b8 Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 1 Mar 2019 14:24:12 +0900 Subject: [PATCH] Add animation --- src/client/app/animation.styl | 6 ++++++ .../app/desktop/views/components/ui.header.messaging.vue | 1 + .../desktop/views/components/ui.header.notifications.vue | 1 + src/client/app/mobile/views/components/ui.vue | 1 + 4 files changed, 9 insertions(+) diff --git a/src/client/app/animation.styl b/src/client/app/animation.styl index 9a0ec2729..6c4d5b8b6 100644 --- a/src/client/app/animation.styl +++ b/src/client/app/animation.styl @@ -39,3 +39,9 @@ 75% { transform: translateY(-8px); } 100% { transform: translateY(0); } } + +@keyframes blink { + 0% { opacity: 1; } + 30% { opacity: 1; } + 90% { opacity: 0; } +} diff --git a/src/client/app/desktop/views/components/ui.header.messaging.vue b/src/client/app/desktop/views/components/ui.header.messaging.vue index fc41144d1..c5d1da3a3 100644 --- a/src/client/app/desktop/views/components/ui.header.messaging.vue +++ b/src/client/app/desktop/views/components/ui.header.messaging.vue @@ -64,5 +64,6 @@ export default Vue.extend({ vertical-align super font-size 10px color var(--notificationIndicator) + animation blink 1s infinite diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue index a02078e4e..d3316d6a8 100644 --- a/src/client/app/desktop/views/components/ui.header.notifications.vue +++ b/src/client/app/desktop/views/components/ui.header.notifications.vue @@ -91,6 +91,7 @@ export default Vue.extend({ vertical-align super font-size 10px color var(--notificationIndicator) + animation blink 1s infinite > .pop $bgcolor = var(--face) diff --git a/src/client/app/mobile/views/components/ui.vue b/src/client/app/mobile/views/components/ui.vue index 7ccd0f25f..05c886a49 100644 --- a/src/client/app/mobile/views/components/ui.vue +++ b/src/client/app/mobile/views/components/ui.vue @@ -126,6 +126,7 @@ export default Vue.extend({ left 0 color var(--notificationIndicator) font-size 16px + animation blink 1s infinite &.post right 28px