From 62d41023e19dfb551e0d9fd28f1361efaced9765 Mon Sep 17 00:00:00 2001 From: Aya Morisawa Date: Sun, 27 Jan 2019 19:12:45 +0900 Subject: Add jump syntax (#4007) * Add jump syntax * Fix typo: spin -> jump * Fix typo --- src/client/app/animation.styl | 8 ++++++++ src/client/app/common/views/components/mfm.ts | 11 +++++++++++ 2 files changed, 19 insertions(+) (limited to 'src/client') diff --git a/src/client/app/animation.styl b/src/client/app/animation.styl index 9cbd3ec6c8..9a0ec2729c 100644 --- a/src/client/app/animation.styl +++ b/src/client/app/animation.styl @@ -31,3 +31,11 @@ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } + +@keyframes jump { + 0% { transform: translateY(0); } + 25% { transform: translateY(-16px); } + 50% { transform: translateY(0); } + 75% { transform: translateY(-8px); } + 100% { transform: translateY(0); } +} diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts index 199d6bb978..542f1e34c5 100644 --- a/src/client/app/common/views/components/mfm.ts +++ b/src/client/app/common/views/components/mfm.ts @@ -135,6 +135,17 @@ export default Vue.component('misskey-flavored-markdown', { }, genEl(token.children)); } + case 'jump': { + motionCount++; + const isLong = sumTextsLength(token.children) > 5 || countNodesF(token.children) > 3; + const isMany = motionCount > 3; + return (createElement as any)('span', { + attrs: { + style: (this.$store.state.settings.disableAnimatedMfm || isLong || isMany) ? 'display: inline-block;' : 'display: inline-block; animation: jump 0.75s linear infinite;' + }, + }, genEl(token.children)); + } + case 'flip': { return (createElement as any)('span', { attrs: { -- cgit v1.2.3-freya