diff options
Diffstat (limited to 'src/client/app')
| -rw-r--r-- | src/client/app/animation.styl | 8 | ||||
| -rw-r--r-- | src/client/app/common/views/components/mfm.ts | 11 |
2 files changed, 19 insertions, 0 deletions
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: { |