51 lines
813 B
Vue
51 lines
813 B
Vue
<template>
|
|
<span ref="element">
|
|
<slot/>
|
|
</span>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, watchEffect} from "vue";
|
|
|
|
const props = defineProps(['touch', 'color'])
|
|
|
|
const element = ref(null)
|
|
let lastValue = props.touch
|
|
|
|
function pulse() {
|
|
if (props.touch === lastValue) return
|
|
lastValue = props.touch
|
|
const e = element.value;
|
|
if (!e.classList.contains('pulse')) {
|
|
// add class for the first time
|
|
e.classList.add('pulse')
|
|
}
|
|
else {
|
|
// restart
|
|
e.getAnimations().forEach((a) => {
|
|
a.cancel();
|
|
a.play();
|
|
})
|
|
}
|
|
}
|
|
|
|
watchEffect(pulse)
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.pulse {
|
|
animation: forwards;
|
|
animation-duration: 1s;
|
|
animation-name: pulse;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
background-color: #888;
|
|
}
|
|
100% {
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
</style>
|