blob: a7c35b294ef86ac67f036d45d0ee8cdcdcf416be (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<template>
<img v-show='activated' src="../assets/bill.png" class="bill" ref="bill">
</template>
<script>
export default {
data() {
return {
x: 0,
y: 0,
startx: 0,
starty: 0,
targetx: 100,
targety: 100,
activated: false
}
},
methods: {
reset(x,y) {
if(this.activated){
return 'activated'
}
this.x = parseInt(x)
this.y = parseInt(y)
this.startx = x + 'px'
this.starty = y + 'px'
this.targetx = (this.x + Math.floor(Math.random() * 100) - 50) + 'px'
this.targety = (this.y + Math.floor(Math.random() * 100) - 50) + 'px'
this.activated = true
this.timeout = setTimeout(() => {
this.activated = false
}, (1.2 * 1000))
//this.$refs.bill.style.animation = 'none'
//this.$refs.bill.offsetHeight /* trigger reflow */
//this.$refs.bill.style.animation = null
},
}
}
</script>
<style scoped>
img {
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-o-user-select: none;
width: 100px;
height: 100px;
animation-name: bill;
animation-duration: 1.3s;
animation-iteration-count: infinite;
position: absolute
}
@keyframes bill {
0% {opacity: 0; left: v-bind('startx'); top: v-bind('starty');}
1% {opacity: 1; left: v-bind('startx'); top: v-bind('starty');}
100% {opacity: 0; left: v-bind('targetx'); top: v-bind('targety');}
}
</style>
|
