+29
-24
lines changedFilter options
+29
-24
lines changed Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
1 1
<template>
2 2
<div
3 -
class="md-ripple"
4 -
:class="rippleClasses"
3 +
:class="['md-ripple', rippleClasses]"
5 4
@touchstart.passive.stop="touchStartCheck"
6 5
@touchmove.passive.stop="touchMoveCheck"
7 -
@mousedown.passive.stop="startRipple">
6 +
@touchend.passive.stop="clearWave"
7 +
@mousedown.passive.stop="startRipple"
8 +
@mouseup.passive.stop="clearWave">
8 9
<slot />
9 10 10 -
<transition name="md-ripple" @after-enter="clearWave" v-if="!isDisabled">
11 -
<span class="md-ripple-wave" :class="waveClasses" :style="waveStyles" v-if="animating" ref="rippleWave" />
12 -
</transition>
11 +
<transition-group name="md-ripple" v-if="!isDisabled">
12 +
<span v-for="(ripple, index) in ripples" :key="'ripple'+index" :class="['md-ripple-wave', waveClasses]" :style="ripple.waveStyles" />
13 +
</transition-group>
13 14
</div>
14 15
</template>
15 16 16 17
<script>
17 18
import raf from 'raf'
18 19
import MdComponent from 'core/MdComponent'
20 +
import debounce from 'core/utils/MdDebounce'
19 21 20 22
export default new MdComponent({
21 23
name: 'MdRipple',
@@ -25,10 +27,9 @@
25 27
mdCentered: Boolean
26 28
},
27 29
data: () => ({
28 -
eventType: null,
29 -
waveStyles: null,
30 -
animating: false,
31 -
touchTimeout: null
30 +
ripples: [],
31 +
touchTimeout: null,
32 +
eventType: null
32 33
}),
33 34
computed: {
34 35
isDisabled () {
@@ -84,29 +85,26 @@
84 85
position = this.getHitPosition($event, size)
85 86
}
86 87 87 -
await this.clearWave()
88 - 89 88
this.eventType = $event.type
90 -
this.animating = true
91 -
this.applyStyles(position, size)
89 +
this.ripples.push({
90 +
animating: true,
91 +
waveStyles: this.applyStyles(position, size)
92 +
})
92 93
}
93 94
})
94 95
},
95 96
applyStyles (position, size) {
96 97
size += 'px'
97 98 98 -
this.waveStyles = {
99 +
return {
99 100
...position,
100 101
width: size,
101 102
height: size
102 103
}
103 104
},
104 -
clearWave () {
105 -
this.waveStyles = null
106 -
this.animating = false
107 - 108 -
return this.$nextTick()
109 -
},
105 +
clearWave: debounce(function () {
106 +
this.ripples = []
107 +
}, 2000),
110 108
getSize () {
111 109
const { offsetWidth, offsetHeight } = this.$el
112 110
@@ -161,11 +159,11 @@
161 159
transform: scale(2) translateZ(0);
162 160 163 161
&.md-centered {
162 +
animation-duration: 1.2s;
164 163
top: 50%;
165 164
left: 50%;
166 165
}
167 - 168 -
~ * {
166 +
~ *:not(.md-ripple-wave) {
169 167
position: relative;
170 168
z-index: 2;
171 169
}
@@ -175,7 +173,6 @@
175 173
transition: .8s $md-transition-stand-timing;
176 174
transition-property: opacity, transform;
177 175
will-change: opacity, transform;
178 - 179 176
&.md-centered {
180 177
transition-duration: 1.2s;
181 178
}
@@ -0,0 +1,8 @@
1 +
export default (fn, time) => {
2 +
let timeout
3 +
return function() {
4 +
const functionCall = () => fn.apply(this, arguments)
5 +
clearTimeout(timeout)
6 +
timeout = setTimeout(functionCall, time)
7 +
}
8 +
}
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4