diff --git a/routes/_components/AccountProfile.html b/routes/_components/AccountProfile.html index 8568e1ce..92815dc3 100644 --- a/routes/_components/AccountProfile.html +++ b/routes/_components/AccountProfile.html @@ -30,6 +30,7 @@ pressed="{{following}}" big="true" on:click="onFollowButtonClick()" + animation="{{animateFollowButton && followButtonAnimation}}" /> {{/if}} @@ -189,8 +190,25 @@ import { store } from '../_store/store' import { setAccountFollowed } from '../_actions/follow' import { database } from '../_database/database' + import { FOLLOW_BUTTON_ANIMATION } from '../_static/animations' export default { + methods: { + async onFollowButtonClick() { + let accountId = this.get('profile').id + let instanceName = this.store.get('currentInstance') + let following = this.get('following') + let followRequested = this.get('followRequested') + this.set({animateFollowButton: true}) + await setAccountFollowed(accountId, !(following || followRequested)) + let relationship = await database.getRelationship(instanceName, accountId) + this.set({relationship}) + } + }, + store: () => store, + data: () => ({ + followButtonAnimation: FOLLOW_BUTTON_ANIMATION + }), computed: { headerIsMissing: (profile) => profile.header.endsWith('missing.png'), note: (profile) => profile.note, @@ -222,17 +240,6 @@ } } }, - methods: { - async onFollowButtonClick() { - let accountId = this.get('profile').id - let instanceName = this.store.get('currentInstance') - let following = this.get('following') - let followRequested = this.get('followRequested') - await setAccountFollowed(accountId, !(following || followRequested)) - this.set({relationship: await database.getRelationship(instanceName, accountId)}) - } - }, - store: () => store, components: { IconButton, ExternalLink, diff --git a/routes/_static/animations.js b/routes/_static/animations.js index 4fb2a809..40eb76c8 100644 --- a/routes/_static/animations.js +++ b/routes/_static/animations.js @@ -23,3 +23,17 @@ export const FAVORITE_ANIMATION = [ ] export const REBLOG_ANIMATION = FAVORITE_ANIMATION + +export const FOLLOW_BUTTON_ANIMATION = [ + { + properties: [ + {transform: 'scale(1)'}, + {transform: 'scale(2)'}, + {transform: 'scale(1)'} + ], + options: { + duration: 400, + easing: 'ease-in-out' + } + } +]