animation fix
This commit is contained in:
parent
b8288d7cc4
commit
797259cc9d
4 changed files with 9 additions and 11 deletions
|
@ -62,7 +62,6 @@ export default {
|
||||||
'extra',
|
'extra',
|
||||||
'status',
|
'status',
|
||||||
'funcArg',
|
'funcArg',
|
||||||
'animationState',
|
|
||||||
'getClass',
|
'getClass',
|
||||||
'getComponent',
|
'getComponent',
|
||||||
'doAction',
|
'doAction',
|
||||||
|
@ -73,6 +72,9 @@ export default {
|
||||||
EmojiPicker,
|
EmojiPicker,
|
||||||
Popover
|
Popover
|
||||||
},
|
},
|
||||||
|
data: () => ({
|
||||||
|
animationState: false
|
||||||
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
buttonClass () {
|
buttonClass () {
|
||||||
return [
|
return [
|
||||||
|
@ -116,7 +118,11 @@ export default {
|
||||||
if (button.name === 'emoji') {
|
if (button.name === 'emoji') {
|
||||||
this.$refs.picker.showPicker()
|
this.$refs.picker.showPicker()
|
||||||
} else {
|
} else {
|
||||||
|
this.animationState = true
|
||||||
this.getComponent(button) === 'button' && this.doAction(button)
|
this.getComponent(button) === 'button' && this.doAction(button)
|
||||||
|
setTimeout(() => {
|
||||||
|
this.animationState = false
|
||||||
|
}, 500)
|
||||||
close()
|
close()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,7 +19,8 @@
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="fa-scale-110"
|
class="fa-scale-110"
|
||||||
:icon="button.icon(funcArg)"
|
:icon="button.icon(funcArg)"
|
||||||
:spin="!extra && button.animated?.() && animationState[button.name]"
|
:spin="!extra && button.animated?.() && animationState"
|
||||||
|
style="--fa-animation-duration: 750ms;"
|
||||||
fixed-width
|
fixed-width
|
||||||
/>
|
/>
|
||||||
<template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
|
<template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
|
||||||
|
|
|
@ -21,11 +21,6 @@ const StatusActionButtons = {
|
||||||
emits: ['toggleReplying'],
|
emits: ['toggleReplying'],
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
Popover,
|
|
||||||
animationState: {
|
|
||||||
retweet: false,
|
|
||||||
favorite: false
|
|
||||||
},
|
|
||||||
showPin: false,
|
showPin: false,
|
||||||
showingConfirmDialog: false,
|
showingConfirmDialog: false,
|
||||||
currentConfirmTitle: '',
|
currentConfirmTitle: '',
|
||||||
|
@ -99,11 +94,9 @@ const StatusActionButtons = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
doActionReal (button) {
|
doActionReal (button) {
|
||||||
this.animationState[button.name] = true
|
|
||||||
button.action(this.funcArg)
|
button.action(this.funcArg)
|
||||||
.then(() => this.$emit('onSuccess'))
|
.then(() => this.$emit('onSuccess'))
|
||||||
.catch(err => this.$emit('onError', err.error.error))
|
.catch(err => this.$emit('onError', err.error.error))
|
||||||
.finally(() => setTimeout(() => { this.animationState[button.name] = false }))
|
|
||||||
},
|
},
|
||||||
onExtraClose () {
|
onExtraClose () {
|
||||||
this.showPin = false
|
this.showPin = false
|
||||||
|
|
|
@ -15,7 +15,6 @@
|
||||||
:funcArg="funcArg"
|
:funcArg="funcArg"
|
||||||
:get-class="getClass"
|
:get-class="getClass"
|
||||||
:get-component="getComponent"
|
:get-component="getComponent"
|
||||||
:animation-state="animationState"
|
|
||||||
:close="() => {}"
|
:close="() => {}"
|
||||||
:do-action="doAction"
|
:do-action="doAction"
|
||||||
/>
|
/>
|
||||||
|
@ -84,7 +83,6 @@
|
||||||
:funcArg="funcArg"
|
:funcArg="funcArg"
|
||||||
:get-class="getClass"
|
:get-class="getClass"
|
||||||
:get-component="getComponent"
|
:get-component="getComponent"
|
||||||
:animation-state="animationState"
|
|
||||||
:close="close"
|
:close="close"
|
||||||
:do-action="doAction"
|
:do-action="doAction"
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Add table
Reference in a new issue