<template>
<div class="vswabwbm" :style="{ top: `${y - 50}px`, left: `${x - 50}px` }" :class="{ active }"></div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
	props: {
		x: {
			type: Number,
			required: true
		},
		y: {
			type: Number,
			required: true
		}
	},
	data() {
		return {
			active: false
		}
	},
	mounted() {
		setTimeout(() => {
			this.active = true;
		}, 1);

		setTimeout(() => {
			this.destroyDom();
		}, 1000);
	}
});
</script>

<style lang="stylus" scoped>
.vswabwbm
	pointer-events none
	position fixed
	z-index 1000000
	width 100px
	height 100px
	background url("data:image/png;base64,[encoded data, 29000 characters]") no-repeat;
	background-size initial
	background-position 0 0
	transition background-position 1s steps(25)
	transition-duration 0s

	&.active
		transition-duration 1s
		background-position -2500px 0

</style>
