+61
-30
lines changedFilter options
+61
-30
lines changed Original file line number Diff line number Diff line change
@@ -3,24 +3,23 @@
3 3
:class="['md-ripple', rippleClasses]"
4 4
@touchstart.passive.stop="touchStartCheck"
5 5
@touchmove.passive.stop="touchMoveCheck"
6 -
@touchend.passive.stop="clearWave"
7 -
@mousedown.passive.stop="startRipple"
8 -
@mouseup.passive.stop="clearWave">
6 +
@mousedown.passive.stop="startRipple">
9 7
<slot />
10 - 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>
8 +
<md-wave v-for="ripple in ripples" :key="ripple.uuid" :class="['md-ripple-wave', waveClasses]" :style="ripple.waveStyles" @md-end="clearWave(ripple.uuid)" v-if="!isDisabled" />
14 9
</div>
15 10
</template>
16 11 17 12
<script>
18 13
import raf from 'raf'
19 14
import MdComponent from 'core/MdComponent'
20 -
import debounce from 'core/utils/MdDebounce'
15 +
import uuid from 'core/utils/MdUuid'
16 +
import MdWave from './MdWave'
21 17 22 18
export default new MdComponent({
23 19
name: 'MdRipple',
20 +
components: {
21 +
MdWave
22 +
},
24 23
props: {
25 24
mdActive: null,
26 25
mdDisabled: Boolean,
@@ -55,12 +54,11 @@
55 54
this.startRipple({
56 55
type: 'mousedown'
57 56
})
58 -
this.$emit('update:mdActive', false)
59 57
} else if (isEvent) {
60 58
this.startRipple(active)
61 -
this.$emit('update:mdActive', false)
62 59
}
63 -
this.clearWave()
60 + 61 +
this.$emit('update:mdActive', false)
64 62
}
65 63
},
66 64
methods: {
@@ -88,8 +86,8 @@
88 86 89 87
this.eventType = $event.type
90 88
this.ripples.push({
91 -
animating: true,
92 -
waveStyles: this.applyStyles(position, size)
89 +
waveStyles: this.applyStyles(position, size),
90 +
uuid: uuid()
93 91
})
94 92
}
95 93
})
@@ -103,9 +101,9 @@
103 101
height: size
104 102
}
105 103
},
106 -
clearWave: debounce(function () {
107 -
this.ripples = []
108 -
}, 2000),
104 +
clearWave (uuid) {
105 +
uuid ? this.ripples = this.ripples.filter(ripple => ripple.uuid !== uuid) : this.ripples = []
106 +
},
109 107
getSize () {
110 108
const { offsetWidth, offsetHeight } = this.$el
111 109
@@ -169,18 +167,4 @@
169 167
z-index: 2;
170 168
}
171 169
}
172 - 173 -
.md-ripple-enter-active {
174 -
transition: .8s $md-transition-stand-timing;
175 -
transition-property: opacity, transform;
176 -
will-change: opacity, transform;
177 -
&.md-centered {
178 -
transition-duration: 1.2s;
179 -
}
180 -
}
181 - 182 -
.md-ripple-enter {
183 -
opacity: .26;
184 -
transform: scale(.26) translateZ(0);
185 -
}
186 170
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
1 +
<template>
2 +
<transition name="md-ripple" @after-enter="end">
3 +
<span v-if="animating" />
4 +
</transition>
5 +
</template>
6 + 7 +
<script>
8 +
import MdComponent from 'core/MdComponent'
9 +
export default new MdComponent({
10 +
name: 'MdWave',
11 +
data () {
12 +
return {
13 +
animating: true
14 +
}
15 +
},
16 +
props: {
17 +
waveClasses: null,
18 +
waveStyles: null
19 +
},
20 +
methods: {
21 +
end () {
22 +
this.animating = null
23 +
this.$emit('md-end')
24 +
}
25 +
}
26 +
})
27 +
</script>
28 + 29 +
<style lang="scss">
30 +
@import "~components/MdAnimation/variables";
31 + 32 +
.md-ripple-enter-active {
33 +
transition: .8s $md-transition-stand-timing;
34 +
transition-property: opacity, transform;
35 +
will-change: opacity, transform;
36 +
&.md-centered {
37 +
transition-duration: 1.2s;
38 +
}
39 +
}
40 + 41 +
.md-ripple-enter {
42 +
opacity: .26;
43 +
transform: scale(.26) translateZ(0);
44 +
}
45 +
</style>
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
1 1
import material from 'vue-material/material'
2 2
import MdRipple from './MdRipple'
3 +
import MdWave from './MdWave'
3 4 4 5
export default Vue => {
5 6
material(Vue)
6 7
Vue.component(MdRipple.name, MdRipple)
8 +
Vue.component(MdWave.name, MdWave)
7 9
}
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