Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: remove Ripple effects without waiting for the mouseUp event

Browse source
This commit is contained in:
Valentin Kaelin 2019-12-23 00:23:47 +01:00
parent d181eb644b
commit 23943e115b
1 changed files with 6 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/Ripple.vue
View file

@ -1,10 +1,5 @@
<template> <template>
<div <div ref="container" @mousedown="addRipple" class="relative overflow-hidden cursor-pointer">
ref="container"
@mousedown="addRipple"
class="relative overflow-hidden cursor-pointer"
>
<transition-group <transition-group
class="absolute top-0 left-0 w-full h-full pointer-events-none" class="absolute top-0 left-0 w-full h-full pointer-events-none"
name="grow" name="grow"
@ -49,12 +44,6 @@ export default {
const height = this.$refs.container.offsetHeight const height = this.$refs.container.offsetHeight
this.rippleWidth = width > height ? width : height this.rippleWidth = width > height ? width : height
this.halfRippleWidth = this.rippleWidth / 2 this.halfRippleWidth = this.rippleWidth / 2
window.addEventListener('mouseup', this.purgeRipples)
},
beforeDestroy() {
window.removeEventListener('mouseup', this.purgeRipples)
}, },
methods: { methods: {
@ -68,6 +57,11 @@ export default {
top: `${e.clientY - top - this.halfRippleWidth}px`, top: `${e.clientY - top - this.halfRippleWidth}px`,
id: rippleId id: rippleId
}) })
// Remove ripple
setTimeout(() => {
this.ripples = this.ripples.filter(r => r.id !== rippleId)
}, 400)
}, },
purgeRipples() { purgeRipples() {
this.ripples = [] this.ripples = []