Animation.vue

<script>
import { onUnmounted, reactive, ref } from'vue'

exportdefault {
setup() {
constanimate=ref(false)

constsize=reactive({
 width:10,
 height:10,
 })

consttimer=setInterval(() => {
if (!animate.value) {
return
 }
size.width=Math.round(Math.random() *100)
size.height=Math.round(Math.random() *100)
 }, 1000)

onUnmounted(() => {
clearInterval(timer)
 })

return {
 size,
 animate,
 }
 },
}
</script>

<template>
 <div
class="animation"
:style="{
 width: `${size.width * 10}px`,
 height: `${size.height * 10}px`,
 }"
@click="animate = !animate"
 />
</template>

<style lang="postcss" scoped>
.animation {
transition: all 1s linear;
background: #42B983;
}
</style>