diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js index 4ee3890f..466e9b84 100644 --- a/src/components/favorite_button/favorite_button.js +++ b/src/components/favorite_button/favorite_button.js @@ -1,5 +1,10 @@ const FavoriteButton = { - props: [ 'status' ], + props: ['status'], + data () { + return { + animated: false + } + }, methods: { favorite () { if (!this.status.favorited) { @@ -7,13 +12,18 @@ const FavoriteButton = { } else { this.$store.dispatch('unfavorite', {id: this.status.id}) } + this.animated = true + setTimeout(() => { + this.animated = false + }, 500) } }, computed: { classes () { return { 'icon-star-empty': !this.status.favorited, - 'icon-star': this.status.favorited + 'icon-star': this.status.favorited, + 'animate-spin': this.animated } } } diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index fd53b505..0abece31 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -1,6 +1,6 @@ @@ -10,6 +10,7 @@ diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js index e7318dc5..2280f315 100644 --- a/src/components/retweet_button/retweet_button.js +++ b/src/components/retweet_button/retweet_button.js @@ -1,16 +1,26 @@ const RetweetButton = { - props: [ 'status' ], + props: ['status'], + data () { + return { + animated: false + } + }, methods: { retweet () { if (!this.status.repeated) { this.$store.dispatch('retweet', {id: this.status.id}) } + this.animated = true + setTimeout(() => { + this.animated = false + }, 500) } }, computed: { classes () { return { - 'retweeted': this.status.repeated + 'retweeted': this.status.repeated, + 'animate-spin': this.animated } } } diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index 9b2f5c7b..d923c5c4 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -11,12 +11,12 @@ @import '../../_variables.scss'; .icon-retweet { cursor: pointer; + animation-duration: 0.6s; &:hover { color: $green; } } .retweeted { - cursor: auto; color: $green; }